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
1 answer
Why does this .svg file not convert to a font?
I'm trying to convert a .svg file to a font, by using http://icomoon.io/app/ app.
I don't know why, but it is not working. I already tried it before with other files, and it worked.
Here is code for svg image (if you need to see picture just paste…
Ilja
- 44,142
- 92
- 275
- 498
0
votes
2 answers
Changing an HTML Class with Hover Pseudo Class CSS
I'm newish to HTML/CSS (~2 months overall) and stack overflow (first post). Using fontawesome.com my idea is to make this icon flip when the cursor hovers over it. The icon flips when the class includes 'fa-flip' and doesn't when it's not. So I was…
Arishorts
- 1
- 1
0
votes
1 answer
Vuetify use 2 IconFonts
Currently I'm using google fonts icons in my project, but I want to use also FAS5 Icons
I'm using this vuetify configuration, but the documentation doesn't say anithing about this.
import Vue from 'vue';
import Vuetify from…
Eduardo Jiménez
- 351
- 3
- 13
0
votes
1 answer
IcoMoon Font Export Issue
I create a small icon font with IconMoon site. When I import to my website it works fine, but the icon show skew. How I can fix that?
The original icon:
The showed icon:
I add this code to all.min.css from Font Awesome:
@font-face {
…
El Tito Barte
- 277
- 2
- 13
0
votes
1 answer
Dynamically resolve icon font code in a SCSS rule
I am using Nuxt.js (https://nuxtjs.org/), Vuetify.js (https://vuetifyjs.com/) and @mdi/font (https://materialdesignicons.com/) icon font.
I have a case where I want to use an icon, but not the normal way as I normally do in HTML, e.g.
…
Frank
- 2,083
- 8
- 34
- 52
0
votes
1 answer
Why does font-icon render outside of its content area? and how to fix it?
I have a .woff font file consisting of font-icons. These icons are rendered differently in Mac and in Windows. I suspect the reason to be different Win Ascent/Descent and HHead Ascent/Descent values in font metrics.
This icon-font file is generated…
Malolan
- 53
- 5
0
votes
1 answer
How to set size of font icon with inline element before font is loaded
I have this case. I need icon font that is inside text so it wrap properly. the only way I can make it like this is if I use between text and icon (i tag with font awesome) the problem is that before the font is loaded the icon have width of…
jcubic
- 61,973
- 54
- 229
- 402
0
votes
1 answer
Is it possible to show TextSelection with an Icon Font?
I need to use Font Awesome in an WYSIWYG Editor, and want to, that the user can highlight the Icon with Text Selection.
I tried to user-select: all, but it doesn't work (The Icon is still not markable, when I select the text)
.select-text {
…
Christian Gollhardt
- 16,510
- 17
- 74
- 111
0
votes
0 answers
How to use Icon fonts
I just installed Icon fonts from market in VS-Code, but it seems like this extension doesn't work well in my React project, but it does support JSX which has mentioned in the introduction.Here are two main problems:
I could use the snippets, but…
Sherr_Y
- 63
- 6
0
votes
2 answers
Possible to draw css border around icon font that is a circle shape?
I am using icomoon for my icon fonts. Some icons are circular in shape. Is there a way that I can draw a circular border around the icon shape?
I've tried targeting the icon and adding a border to it, but it draws as a box border. Is there a way I…
jmchauv
- 147
- 17
0
votes
1 answer
How to reference an glyph in iconfont by word?
I want to use iconfont in my project,and custom the font file by fontforge.
I know glyph can be referenced by unicode in html or css, such as and &::before{content: "\e030";}.While I find some people can reference glyph by this:…
Smart Coder
- 85
- 8
0
votes
2 answers
icon_fonts does not work in my flutter app
I've downloaded the icons that I need in my flutter app and after specifying the path to the file.ttf inside pubspec.yaml, Icons does not show up in my app
here is the code
import 'package:flutter/widgets.dart';
class CustomizedIcons{
static…
Karrar
- 1,273
- 3
- 14
- 30
0
votes
1 answer
icon font code (like )is not valid when add it to DOM by using textContent
I'm using google iconfonts in my website.
Normally,the code in HTML is like this:
and it will display a 'time' icon on the page:
the icon will display
But now I want to add a icon to DOM by using appendChild()…
sputnik
- 45
- 4
0
votes
0 answers
jquery pseudo element before, content with backslash inside getting from attr(data-before)
I have a small problem. I want to change glyphicons (icon-font) using jQuery, like this:
var icoList = 'E251'
var icon = $('ul > li:has(ul)', $this);
icon.addClass('icon');
icon.attr('data-before', '&#x' + icoList); // this doesn' work,…
Tabes
- 33
- 6
0
votes
0 answers
How to set font grid(width x height) for customized font converted from svg?
I have a customized icon font using svg and set the font-size as
.c-class {
font-size: 24px;
}
and
.c-class:before {
font-size: inherit;
}
And if I hover on the icon, it's displayed as ( 24 x 25 ) instead of the expected output ( 24 x 24 ).…
khet
- 95
- 11