Stack Overflow
Stack Overflow

Questions tagged [icon-fonts]

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.

190 questions
7
votes
1 answer

External font does not load when link is loaded from inside the shadowDOM

At the begining I want to say that I'm aware that the question is similar to: How to let imported css font / icons have effects on elements in the shadow dom? It's not the case and it does not help. Issue: I've recently decided to use the ShadowDOM…
AdamKniec
  • 1,607
  • 9
  • 25
7
votes
4 answers

Converting SVG to font icon using icomoon

I have an svg which when opened in any browser comes up fine. I am trying to convert a bunch of them to font icons using http://icomoon.io/ but it's not coming up correctly after importing. I tried using http://fontastic.me/ as well but no…
Kshitiz
  • 2,852
  • 5
  • 32
  • 41
7
votes
2 answers

Iconfont charachterspace collapses in Android (Fontastic)

I’ve used Fontastic.me to create an iconfont. It works great except in the native browser of Android 4.2.2 and 4.3 (eg: modern Samsung tablets). In these browsers, the characters of the entire font have no width. This occurs with every font made…
WouterLemoine
  • 93
  • 5
7
votes
3 answers

large Iconfont icon cut off on the right side

I'm using a large Icon from an icon font my client delivered as a header logo on the index page of a web app. The logo is as large as 60% of the device width and consists of a large round logo (about 40% of the icon) with text below and as wide as…
All Bits Equal
  • 731
  • 2
  • 10
  • 26
6
votes
0 answers

Material Design Icons: Google's recommended font sizes look bad on desktop screens... Fix?

Material Design Icons (Icon fonts not sized correctly) I know I can fix them w/ css (I've done that below in the code snippet). But why? Is there a CSS technique I can add to the style sheet so this won't happen? Google recommends that you set your…
Oneezy
  • 4,881
  • 7
  • 44
  • 73
6
votes
3 answers

How can I use icons in navigation view's menu using icon font in android

I am trying to migrate my android application which is using the png assets to icon fonts. I could successfully use it in navigation drawer using a list view. But I couldn't use it in navigation view by specifying it in the xml file of the menu.…
Neeraj
  • 1,769
  • 3
  • 24
  • 41
6
votes
1 answer

How to flatten SVG files

There is this site http://game-icons.net/ that offers huge number of open source icons. That is 1345 SVG files to this day. I would love to use them with a web project I am working on right now. The logical step is to transform them into an icon…
Tom
  • 556
  • 1
  • 7
  • 16
6
votes
2 answers

Line-height issue with firefox

I have a problem trying to make a search button looking fine on firefox. It's an input submit made with an iconic font, a white background and a border-radius like this: display: block; width: 60px; height: 60px; line-height: 60px…
bigorno
  • 61
  • 1
  • 1
  • 2
6
votes
1 answer

Padding issues (?) with custom icon font. Example below

I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up. For some reason, the icons seem to have shifted…
cable_ready
  • 63
  • 1
  • 5
5
votes
2 answers

How to make font icon be full of a block element?

I want to make a rotated animation of a font icon, but I can not let the center be the right place, The rotation is always offset a little. Here is the example: @keyframes circle { from {transform: rotate(0deg);} to {transform:…
Henry
  • 531
  • 3
  • 12
5
votes
2 answers

Material Design Icons Flicker (FOUT?)

I have noticed on my angular 2 app that in IE 11 all my material design icons will flicker the text before showing the actual icon. Is there a solution to this? Is there a way to use some sort of preloader?
Will
  • 292
  • 4
  • 16
5
votes
0 answers

gulp iconfont: Failed to decode downloaded font, OTS parsing error: head: Bad ppm of 13

The icon displays in Safari but not FF or Chrome. Getting the following errors on local development: Failed to decode downloaded font: http://client.dev/wp-content/themes/client/build/assets/fonts/icons/client.woff2 (index):1 OTS parsing error:…
blkedy
  • 1,243
  • 2
  • 13
  • 19
5
votes
1 answer

Font icon ligatures

I made my font icon set with fontello. At the moment it works like this:
and the CSS of the corresponding class is: .icons_class { font-family: 'myFont'; ... ... } .home:before { …
3vi
  • 420
  • 1
  • 4
  • 21
5
votes
2 answers

Why won't my icon font icon stay rotated?

I am trying to a rotate an icon with transform: rotateZ(90deg) but it seems like it is ignoring it. When I add a transition to the icon I can see the animation of the icon rotating but then it snaps back into place when it is done animating. Here it…
Wryte
  • 885
  • 2
  • 10
  • 23
5
votes
2 answers

Create webfont with Unicode Supplementary Multilingual Plane symbols

I did a proof-of-concept online implementation of a traditional card game. To avoid having to actually draw pictures of the cards I used the corresponding Unicode characters (eg. U+1F0A1 ). While this works great on a modern Linux desktop (where…
Caramdir
  • 689
  • 5
  • 9
1
2
3
…
12 13