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.
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 am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
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'm a fan of Font Awesome I'm using lots of icons from there. But, now I need adding my custom image to font awesome file for using as icon. I want to add them to font icons files so that I can use their property like .fa-2x .fa-lg etc By researching on internet I found that I can convert my svg image to font using icomoon or font custom But, my confusion is after downloading files of my generating images as fonts how can I add those to font awesome files. I mean, there are already some files named
FontAwesome (Open Type Font File)
fontawesome-webfont.eot
fontawesome-webfont (SVG Document)
fontawesome-webfont (True Type Font File)
fontawesome-webfont.woff
Should I've to put anything on those files after downloading my custom generated fonts files? Or, should I've to put the CSS code from custom generated fonts files to fontawesome.css? if this, what CSS code should I put on there? I ain't experienced so much with this process. So, I'm confused with this. That's why, I can't tell everything arranged way. Sorry for this. Thanks
Best bet might be using a service like Fontello where you can "create" your own custom icon font and upload the custom icons there in addition to selecting the icons you need from Font Awesome.
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.