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
1
vote
2 answers
Icon Fonts Not Vertically Centered With Text
I am using icon fonts in a nav list and I want text to be in between two of the icons. The problem is that the icons and the text do not match up well. The icons area obviously higher than the text so when they are both on the baseline, the icons…
Startec
- 12,496
- 23
- 93
- 160
1
vote
2 answers
How to keep links and hover effects on my icon-fonts isolated with CSS
I have a custom font-face to embed demographic icons on my webpage, with additional information stored in a link around the 'data-msg' element for each icon. The problem is that I cannot seem to define the CSS for these mouse-over messages without…
Marc Maxmeister
- 4,191
- 4
- 40
- 54
1
vote
1 answer
How do I create an un-centered circular css background behind an html element?
I am using a custom font from Fontastic to display icons like you see here:
The icons can only be one color plus transparency, in this case the green you see above.
I want, in some circumstances, to display the 'details' of these icons as white -…
Ecnalyr
- 5,792
- 5
- 43
- 89
1
vote
0 answers
IcoMoon display issue in chrome
I have a problem with my icomoon font in Chrome with that icons are sometimes not shown. I don't get the font-missing empty rectangle "fallback".
When I select the element with an icon it will appear, so a repaint will fix it. But forcing a repaint…
pstenstrm
- 6,339
- 5
- 41
- 62
1
vote
2 answers
How to use github icon set on fontello
Fontello has an area where you can drag custom fonts onto.
GitHub style page here shows they have a custom font I want to use on that fontello can someone please help me to import it.
Noitidart
- 35,443
- 37
- 154
- 323
1
vote
3 answers
HTML/CSS: :after pseudo element overflows parent
I have styled some links to look like buttons. These 'buttons' include icons which are added with an icon font using the :after element.
As its a responsive layout, the buttons need to work on multiple screen sizes. When placed inside a flexible…
Sven
- 12,997
- 27
- 90
- 148
1
vote
1 answer
How to vertical center a text with bigger font-size than container in a input in firefox
There is a thing in default stylesheet firefox who make : line-height:normal !important; for the input.
My text with font-size:20px; have a computed line-height of 37px in firefox. My container (the input) have a fixed height of 30px and i can't…
tomtomtom
- 829
- 1
- 8
- 20
1
vote
1 answer
How to indent text on 2nd line in list elements with icon fonts
I use an icon font for list style elements:
.desc.std li:before {
content: '\e81e';
font-family: 'icons';
width: .6em;
}
But when the text breaks to 2nd line, I have no text indent.
Can anyone please tell me, how I can get the 2nd and…
deelite
- 355
- 4
- 17
1
vote
1 answer
Issue with custom icon font rendering differently in different browsers
Having issues with a custom icon font. It renders differently between Safari and Chrome. It appears to be between 1-2 pixels lower in Safari. Can I somehow have it render the same in both browsers?
Created the icon font by exporting 16 x 16 px SVG…
Henrik
- 278
- 3
- 12
1
vote
0 answers
How to use icon font with HTML entities when Thymeleaf escapes ampersand for XML validation?
I'm trying to use Icomoon web icon font in a Spring Thymeleaf application.
The recommended method is to set a data-icon attribute in an HTML tag.
The given css then sets font family to icomoon and content to the value of the data-icon attribute,…
Quentin Renard
- 71
- 4
1
vote
3 answers
Change a icon fonts when clicking on it
This is my html:
And when I click on span tag I would like data-icon will change: data-icon="🔓
$icon = $(event.currentTarget)
if…
Fran b
- 3,016
- 6
- 38
- 65
1
vote
2 answers
SymbolSet Issues in IE8
I have been using Symbolset fonts (Standard and Social) for a few months now and love them. Recently I have been noticing some issues in IE8 though. Some sites I am doing are not loading at all in IE8. It has this in the bottom social bar:…
Andrew
- 1,121
- 4
- 15
- 24
1
vote
0 answers
CSS rotated transition behaving differently in windows and linux
The problem
This is quite a bizarre issue. I designed a website on linux and threw in some CSS transitions with rotations. At the end it would look like this, (I tapped it so you can see it).
You can see the cycling thingy spinon its own axis. This…
TKrugg
- 2,255
- 16
- 18
1
vote
1 answer
how to use icon fonts with bootstrap?
i generated some font-based icons with the online tool icomoon, and am trying to use it with a bootstrap template i have.
the problem is that bootstrap's css uses the "icon-" prefix, and my icon-font uses the same, such as "icon-puzzle" for the…
JasonS
- 7,443
- 5
- 41
- 61
1
vote
1 answer
Font Icon for StackOverflow logo?
Looking for icon font for StackOverflow to use similar with techniques similar to Fontello or Font Awesome.
I see an open issue for it here. Perhaps this is as close as it gets for now.
Cheers,
jf
jfroom
- 660
- 7
- 17