The render of a FontAwesome icon works perfect on Firefox. But when I wanna change it through the inspector (Firebug), it doesn't show the unicode (for example: f066). So where I should have:
content:"\f066;
It shows:
content: "";
It is not showing the data correctly. If I overwrite a new one (\f077) it prints nothing. Is it possible to fix it? What I need is to be able to change FontAwesome icons from the inspector, like on Chrome.
Related
I've got little problem with font-face. I've generated font-face for web-site, font is called 'Bebas Neue'. It works perfectly in Safari, but in other browser some text elements use the right font, some don't, although if you click on them in browser developer tools you'll see there 'Bebas Neue' as a font.
Here's a link to a web-site: http://glebgrg4.bget.ru. You can see the wrong font displaying on the big green button on top and in menu. How do I solve this bug?
Probably you didn't set Cyrillic Subsetting. Simply on fontsquirrel:
EXPERT... -> Subsetting: -> Custom Subsetting... -> Language: -> Select Cyrillic.
I'm using an icon font and everything works so far as the icons show up in the interface as they should. I'm creating the file via Sass using the .scss format.
I noticed when I inspect an element to view it's CSS properties in the code inspector, or view the style sheet via the code inspector, or just open the .css file in my text editor, it shows the Unicode character of the icon glyph as follows:
.icon-alert::before {
content: "" !important;
}
What causes the little box with the question mark instead of what's actually written in the .scss file: \e669
How can I fix this?
I cannot mark this duplicate yet but there are existing posts around this topic. You have to create a function to workaround a known bug:
Sass: unicode escape is not preserved in .css file
https://github.com/sass/sass/issues/1395
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
For some reason, two icons that show in IE and Chrome do not appear in Firefox and instead gives me some weird icon. I am using a font to display these.
I used firebug to track down exact CSS code for this but it simply shows
.icon-signin:before{
content: "";
}
whereas in IE, it shows
and in Chrome it shows:
I honestly don't understand what's happening here.
In the actual CSS file it has the following line:
.icon-signin:before{content:"\e047";}
All I could gather from google search is that
:before
is outdated and that I should use
::before
Would this fix the solution?
But if that is the case, why is Chrome displaying the icon when it also reads the css code with :before, not ::before ?
I am using :before{ content: "\1F4C4"; } to insert Entypo webfont icons before my links. The icons aren't loading on mobile webkit. Instead, a diamond with a ? inside shows in their place.
Oddly enough, I don't have this problem in any desktop browser, including webkit. Also, the same icons loaded via <a >📞</a> show just fine in mobile webkit.
This has to do with a bug in Webkit. I noticed that it only affects unicode with more then 4 characters. See the following answer for further details:
https://stackoverflow.com/a/10641785/2114896