I would like to improve the look and feel of my Remedy app by inserting Font Awesome icons where buttons appear styled. How do I implement Font Awesome icons in my Remedy app?
Create a button through the Remedy AR System WYSIWYG. In the Display properties, specify the necessary Font Awesome classes. For example, fa fa-search. In the image fields upload an Embedded Image that is completely transparent. Set the "Display as Flat Image" property to true. You can specify the Alternative Text to something useful to appear when users hover the icon, for this example, "Search".
In the Appearance properties for the view, edit the web header to upload Font Awesome CSS. For this example, the path to this Font Awesome is at "\Program Files\BMC Software\ARSystem\midtier\resources\standard\stylesheets\font-awesome".
<link href="../../../../resources/stylesheets/font-awesome/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
You may want to upload another css file to specifically style this class to the font-size and color of your choosing. Add the path for this css file in the Web Header as we have done for Font Awesome and edit the Custom CSS Style as needed.
Note, if the Image Position property is set to center, then only the icon and no text should appear. If the Image Property is set to right and the button has a label such as "Search", then it will appear as the text with a font awesome icon to the right. This pair looks pretty good when the font is styled as Header III.
If you want to change icons in Mid Tier then there are skin customization's available about which you can find on this links:
_https://docs.bmc.com/docs/display/public/ars81/Applying+skins+to+form+views
_https://docs.bmc.com/docs/display/public/srm81/Rebranding+the+Request+Entry+console
_https://docs.bmc.com/docs/display/public/srm81/Defining+skins+for+the+Request+Entry+console
but the best one is here:
_https://communities.bmc.com/thread/72471?tstart=0
I hope this helped. :)
Best regards,
Dino
Related
In my Vue 3 project I need to use some Font Awesome icons, but not all obviously. But if I load icons as webfont, it loads all informations of all icons.
If I use icons as SVG I lost the benefit using icons as font. For example: adjust to font size, color, etc.
In Angular I can use <fa-icon ...> tag to use icons like this.
How can I load only used icons but still keep font-behavior benefits?
Have a look at #unocss/preset-icons it will do it automatically for you and you will gain access to a bunch of other icons as well.
The CSS it uses for the icons is different, they are not used like font, but one may still change their color & size by setting the corresponding font properties. Check this post for more info.
I notice that in my CSS file, there are some rules which uses Font Awesome Web font, as below:
ul.fancy li:before, .category-page ul li:before {
display: none;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0da";
}
Now I want to replace it with SVG icon or SVG Sprites from Font Awesome. Since Fontawesome icon allows to be used in both Web Font or SVG icon, its CSS Pseudo-elements should also support all these methods too. Just wonder how to do so? I check the Font Awesome website and cannot find the corresponding document on such a case.
Web fonts were really a great idea and a very useful one for you to have responsive un styled icons for web development. But right now it's not that too much good idea since every major browser supports the svg standard it makes no sense to install, or call via CDN a web font which is consuming resources for you to use, how many, ten icons on your app or web site?
So, for example, the last version of font awesome comes with a src folder in which there are all the icons on svg format.
Said that, there is another easy way for you to grab the icon from within the font and turn it into a svg. Let's say you have installed the font to your system. Then you download the cheat sheet of the font and open it on the browser, look for the selectable version of the icon you want and select it and copy. Then you open Inkscape and get the text tool and paste the selected icon. Look in the font selector for the font and apply it to the icon you just copied as text. Then convert the text into a path and save it as svg.
The next step is to create a css system to place the icons instead of the font icons. As long as I have done you should be able to use the system that was created in the framework for the use of font awasome. Just open the font css and look for the general stiling, I mean, the classes i, icon, mainly and paste them into your css file.
Now you try this, replace the font in the code that you provide with a background and the url of your icon.
Of course, it will be useful just for one icon
If you want more you should create yourself a similar system like the one the css of the font uses.
In my case I have created a class prefix simbicon-xxxx where the xxx stands for the name of the icon. I will show you now.
CSS
.simbicon-logout {background: url('../img/logout.svg') center no-repeat;bottom: 0;width: 36px;height: 36px;}
HTML
<i class="icon simbicon-logout"></i>
And the few icons that I actually use on the proyect get displayed exactly as the font icons did.
One caveat of this method is that the font icons comes with no fill attribute so they get the custom color of the theme. With this system you have to place a fill inside each svg icon.
Notice that the "\f0da"; in your css refers to the specific icon to be displayed from the font. In the cheat sheet appears an image of the icon, this code above and a selectable icon. That last is the one you need to select to copy as text inside Inkscape.
In the image above are shown the css class of the icon, the acssi reference and the selectable which is inside the red circle.
Sorry for the typos but I am on my mobile now and I have no glasses here.
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
I would like to add the following image...
in to a font-family that I am using on my website...
http://fortawesome.github.io/Font-Awesome/
which does not include this as an icon option.
What is the most effective and efficient process in achieving this?
You can create your own icon font-family with Inkscape using svg vector images. There is a great tutorial on webdesignerdepot.com about this. Don't add icons to an existing font whether that is possible or not, Font Awesome might get updated now and then with new fonts.
I found the following HTML code
<i data-toggle="tooltip" class="icon-ok-sign" data-original-title="File not detected"></i>
on https://www.virustotal.com/en/file/9d72e0523cc6bd4baa1bd88967aec1402551a5d565703b799ce6be52ec1a7640/analysis/
Why they are using <i>?
How to get path for the "icon-ok-sign" icon?
How can I find out the icon path with the Chrome browser menu item "Inspect Element"?
They are using bootstap as their framework.
Bootstrap includes an icon pack called glyphicons. It's a sprite file, and has these icons in: http://twitter.github.io/bootstrap/base-css.html#icons.
In this site they are using an icon font, the popular Font Awesome.
The icons are in the font, rather than as images, which has many advantages.
The reason they use the i tag, is because Bootstrap decides to use that to represent an icon. Personally I don't really like that – i = italic, but on the other hand, its a purely stylistic tag and isn't really used anyway. (em should be used for emphasis, not i).
The tooltip stuff is also from Bootstrap and the documentation is here.