An icon font is a font containing glyphs to be used as icons in a web page or application. Use this tag for questions involving fonts used specifically in this way, including various methods and practices for using glyphs as icons or for creating fonts that contain such glyphs.
Questions tagged [icon-fonts]
190 questions
102
votes
4 answers
Icon Fonts: How do they get rendered by web pages?
I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work?
I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in…
Vivek Chandra
- 4,240
- 9
- 33
- 38
52
votes
9 answers
Using Icon Fonts as Markers in Google Maps V3
I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML or PHP document the code for the marker would be:
gfaw
- 715
- 1
- 7
- 10
38
votes
2 answers
How can I rotate a font icon 45 degrees?
I want to rotate this font icon 45 degrees. The icon has this CSS (all CSS compiled via LESS):
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size:…
YPCrumble
- 26,610
- 23
- 107
- 172
30
votes
2 answers
How to add one more icon using fontello without downloading a new group package
I use fontello for some icons on my website. When you download from fontello they deliver:
.ttf
.woff
.svg
.eot
css file with @font face to link all together
Everything works fine with this but I always find myself with this issue which I would…
Daniel Ramirez-Escudero
- 3,877
- 13
- 43
- 80
25
votes
7 answers
Use font awesome 5 on angular material 7
I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font.
first:
npm install --save-dev…
Alex
- 1,230
- 2
- 24
- 46
18
votes
3 answers
Unicode characters for «email», «save», «print»
I want to make a fallback for my icon font. For example, for my beautiful icon font check mark I use Unicode check mark equivalent:
.icon-checkmark {
&:before {
content: "\2713"; /* Unicode Character 'CHECK MARK' (U+2713) */
}
}
My…
artuska
- 864
- 2
- 12
- 23
17
votes
6 answers
Icon fonts vs images
My manager tells me not to use icon fonts on our websites, as it is another http request plus the extra kBs to download. Also because I would have to use content before for the font (I can't change the html), he prefers background images so it works…
Miss A
- 461
- 1
- 4
- 11
14
votes
3 answers
Support for Unicode By browser
I am using the CSS Buttons With Icons But No Images.The icons are generated using unicode values. In this I faced a problem that some browsers doesn't support some unicode values. So instead of proper icon it shows some unwanted symbol.
To provide…
Prasad Jadhav
- 5,090
- 16
- 62
- 80
12
votes
1 answer
Correct font-display value for icon fonts
font-display is a new CSS property that allows developers to control how fonts are rendered depending on if they load quickly enough. There's been a few articles on it:
Controlling Font Performance with font-display - Google…
rink.attendant.6
- 44,500
- 61
- 101
- 156
12
votes
6 answers
Sass variable interpolation with backslash in output
I'm creating some icon font rules for using in my site. Using Sass I wanted to list all the icons in a list variable and use @each to loop through them all.
Code looks like this:
$icons:
wifi 600,
wifi-hotspot 601,
weather 602;
@each…
Ben
- 2,917
- 10
- 28
- 47
12
votes
6 answers
how to update icomoon fonts to existing icomoon fonts?
updating fonts to existing fonts
I’m already using 5 icomoon fonts in our website which was downloaded from icomoon. I want to include 2 more fonts. What should I do?
Can I add the new 2 fonts to existing fonts?
If yes, How can i add them?
user1139928
- 131
- 1
- 1
- 6
11
votes
1 answer
How do I use icons from fontello in my css?
I've been using entypo (downloaded from entypo.com), and displaying the icons like so:
.icon:before {
display: inline-block;
font-family: 'Entypo';
text-decoration: none;
speak: none;
}
.email:before {
content: "\2709";
}
Pretty…
user1694077
11
votes
6 answers
Tools to create an Icon Font
I'd like to create an icon font for use in a web application. fontAwesome, Iconic, fontomas are examples of what I'd like to do but I need to use custom icons. I'm not sure where to start. Any help is appreciated.
Rob
- 3,026
- 4
- 30
- 32
8
votes
1 answer
Trouble using icon fonts with CSS
I am new to web design and development and have been playing around with different styling techniques. During the course of my research, I came across icon fonts. Though I have investigated a number of tutorials and videos, I have been unable to…
Wp3Dev
- 2,001
- 7
- 38
- 54
7
votes
3 answers
Is there a Font available for the new Bootstrap Icons?
Coming from Font Awesome I'd like to use the new Bootstrap Icons in my web project. Unfortunately the inclusion of Bootstrap Icons seems way more tedious in regard to the amount of code I have to insert.
What I'm looking for:
Take for example the…
jor
- 2,058
- 2
- 26
- 46