I am trying to use font awesome icons in CSS3 as background. I already tried this CSS:
content:"<i class="fa fa-circle-o"></i>";font-family: FontAwesome
However, it's not working. I want to use font awesome and I don't know how. Please let me know.
I suggest you go back to the font awesome website and read up about it, look at some examples of how to use it.
http://fortawesome.github.io/Font-Awesome/examples/
Related
Wordpress is stripping out the slash from
content:"\f12b";
in my CSS to display a Font Awesome icon. I can only use CSS in this particular case. Can anyone suggest a workaround/alternative way of stipulating the content number?
Thank you!!
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'm with some doubts here, i've trying to find a tutorial or example on 'how to' but i can't find any.
I have a good knowledge in css (not professional, but i understand) and when working with some templates or tutorials i've seen some flat icons on the website, when i go to the css class, what i found is something like these: "example:before { content: "\e00a"; }"
I'd like to know how is it done? How can i change it to another icon? Or even, how can i create another 'flat icon' based on the same process?
If anyone can help me, please.
Thanks
You can use the content property for icons for example. \e00a for example refers to this character:
It can be used as the bullet point for list items:
li:before {
content:'\e00a'
padding-right:12px;
}
Some fonts come with characters like the ones found here. You can use those characters like \f042 for example to display the screen contrast symbol. however you will need to download the font first to make use of it. Read more about #font-face here
Use Predefined CSS files like "fontawsome" or "glyphicons" (Google It). And then use their css class like <i class="fa fa-facebook"></i> this will show facebook icon.
You are looking for font icons. This gives you scalable vector icons that can be customized with CSS on size, color, drop-shadow, etc. -- Font Awesome
Here is a great example.
http://fortawesome.github.io/Font-Awesome/icons/
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.