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
5
votes
2 answers
zurb foundation icon font with ruby on rails
i am trying to get the zurb foundation icon fonts to work within my rails project, though they dont appear to be working correctly
general_foundicons.css.sass
/* font-face
@font-face
font-family: "GeneralFoundicons"
src:…
Boss Nass
- 3,384
- 9
- 48
- 90
4
votes
0 answers
Generate SVG image from icon font?
Is it possible to generate SVG images from icon fonts?
For instance, framework7 offers many cool icons with the icon font below, but they only make SVG versions available for 1000 icons, leaving 230 without SVG equivalents.
@font-face {
…
Crashalot
- 33,605
- 61
- 269
- 439
4
votes
1 answer
Icon fonts : some icon display as text instead on my machine
This is an issue about how my machine sees the web, not a personal web project.
On my machine, some icon fonts display as literal text (the name of the icon) instead of the graphic icon itself.
Environnement
MacBook Pro (Retina, 13-inch, Early…
Romainpetit
- 897
- 2
- 11
- 29
4
votes
3 answers
Is there any reason not to use a custom font for icons on a web site?
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters,…
Parker
- 7,244
- 12
- 70
- 92
4
votes
1 answer
Icon Fonts in Shadow DOM
Is there a recommended way to let Icon Fonts (eq. FontAwesome/Octicons) bleed into the Shadow DOM?
At the moment, when I want to use an icon in a custom element's Shadow DOM I have to include parts of the ociticons.css file inline in the Shadow…
sluijs
- 4,146
- 4
- 30
- 36
4
votes
2 answers
Twitter Bootstrap and Elegant Icons rendering double icons
When I insert an icon into the html, the icons get rendered twice. I am not sure why the icon is outputted two times. I have tried a multitude of different approaches to rectify this to no avail. I am not sure why this behavior is happening.
HTML…
uglychef
- 41
- 2
4
votes
2 answers
Include font awesome inside input type text
I´m trying to include a Font Awesome inside my input in left side but I´m not having sucess. I never used awesome fonts to this purporse. Anyone there knows how to include the font inside the input? Thanks!
The font Im trying to include in left side…
John23
- 219
- 2
- 9
- 31
4
votes
1 answer
Icon font in select drop down
I am trying to add icon fonts (Icomoon specifically) into an HTML select drop down like Linkedin has in its top search menu.
4
votes
1 answer
Sencha Architect 3 does not use app.css
I am trying to add custom font icons to my sencha architect project, and remove unnecessary theme classes but it seems that Sencha Architect does not use the app.scss at all (located in the resources/sass folder of my project). The changes that I…
Bram
- 4,533
- 6
- 29
- 41
4
votes
4 answers
Some Icomoon icons won't display
I am using Icomoon in an application - I am having a problem with a small number of icons which will not display. I have downloaded all the icons via the Icomoon App and this is the latest version - all 450 are selected.
I have tried on just a blank…
bhttoan
- 2,641
- 5
- 42
- 71
4
votes
2 answers
Assign a HTML-entity as an attribute value using JavaScript/jQuery
I've been following this technique on css-tricks to add icons to a website: http://css-tricks.com/html-for-icon-font-usage/
I've got this in my CSS:
[data-icon]:before {
font-family: Symbol;
content: attr(data-icon);
speak: none;
}
However,…
ThisLeeNoble
- 150
- 9
3
votes
2 answers
How to self-host Google's Material Design Icon-Fonts on your server, and use them in your website?
In this guide, they have instructed to download the Material Design Icon Fonts in formats like ttf, eot, woff, woff2 etc. and host them at a location on the server and use CSS like :
@font-face {
font-family: 'Material Icons';
font-style:…
Solace
- 8,612
- 22
- 95
- 183
3
votes
2 answers
font icon as page background with flexbox
I am trying to use a font-icon as a background image, and I using flexbox to center it horizontally and vertically. I have set this to the body.
I want all other content to above the font-icon, and I am using the same flex properties to center the…
user2371684
- 1,475
- 5
- 20
- 45
3
votes
0 answers
Icon font are rendered as squares on subsequent visits in Safari (iOS and OSX)
We're experiencing a weird problem with font icons. First couple of visit they load beautifully, but after a period of idle (usually around 24 hours) on subsequent visits they are replaced by squares. In Chrome, Firefox and even IE it works without…
Kristoffer
- 1,633
- 3
- 19
- 25
3
votes
2 answers
Font Awesome support for screen readers and accessibility
According to the Font Awesome home page:
Font Awesome won't trip up screen readers, unlike other icon fonts.
I also know that it is recommended to add the aria-hidden="true" attribute to font icons so that screen readers can ignore them.
My…
Muhammad Rehan Saeed
- 35,627
- 39
- 202
- 311