@font-face custom icon font only showing unicodes
You're possibly running into unicode-range
limitations. As described here you can define in a font-face
declaration which Unicode characters are covered. It could very well be that older Chrome versions only replaced Latin characters by default. You should be able to fix this by adding this to your font-face declaration:
unicode-range: U+00-FFFF;
Having said that, it could very well be that you're only having a local issue. Check in your Chrome settings, under Advanced Settings, under Web Content click Customize Fonts, then at the bottom check the current setting for Encoding. Changing its value to "Unicode (UTF-8)" could solve the issue as well.
Icon Font causes Compatibility Mode in IE8
Long story short, there are two ways to solve this:
- assign to the
Basic Latin Range
:U+0020 to U+007F
- assign to the
Low Surrogates Range
:U+DC00 to U+DFFF
I found this through unit testing various ranges with my custom icon font using a grunt-webfont
build process.
I didn't exhaustively test every range, but I found these two to work, and to be sufficient.
Notes: The Basic Latin Range starts from U+0020
not U+0000
.
The Low Surrogates Range
has a larger address space, and so is preferrable if you have a lot of glyphs. It also has the advantage of rendering square boxes if the glyph fails to load, as opposed to assorted Latin characters as the Basic Latin Range
does.
Custom icon font not loaded
Is it perhaps because the font is not set? The font-family is defined in the "icon" class, but you are not specifying that. What happens if you use the following instead?
<i class="icon icon-send"></i>
Custom icon fontface not showing on my website but showing for others?
OK, I believe your problem lies here:
EDIT: Hopefully more clear instructions.
Your .cbp-ig-icon
class is probably not correctly being inherited by your additional classes that define the content. There might be something going on with the double :before
. As a test, directly define the content under .cbp-ig-icon:before
(font-family, etc), directly to your .cbp-ig-icon-show:before, and see if that works.
.cbp-ig-icon:before {
font-family: 'anyoldicon';
...
}
.cbp-ig-icon-shoe:before { /** This is a totally separate class **/
content: "\e000";
}
CSS - apply unicode range to brower-installed font
You can use local(), an example:
@font-face {
font-family: 'CustomConsolas';
src: local('Consolas');
unicode-range: U+0061-0100;
}
Font Awesome & Unicode
It does not work, because <i></i>
simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you add class=icon-home
to the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.
To get the glyph just once, you need to use CSS that asks for the use of the FontAwesome font without triggering the rules that add a glyph via generated content. A simple trick is to use a class name that starts with icon-
but does not match any of the predefined names in Font Awesome or any name otherwise used in your CSS or JavaScript code. E.g.,
<i class=icon-foo></i>
Alternatively, use CSS code that sets font-family: FontAwesome
and font-style: normal
on the i
element.
PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled,
will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.
Related Topics
How to Float Paragraph Next to Image Without Wrapping the Image
Is There a Trick to Show Arial Black in Firefox
Align an Element to the Bottom of Window
Make a Pause During Infinite CSS3 Animation
CSS Border Shorthand When Each Border Has a Different Width
Javafx CSS Button with Image - How to Define the Size of the Image
How to Create Hollow Triangle in CSS
How to Get Rid of Input Border in Chrome
Curved Border with Stroke in Pure CSS
CSS :Not() Selector. Apply Style If Parent Does Not Exist
Webkit-Transition for "Top" and "Bottom" Properties
Use Django Template Syntax in a CSS File
CSS Transition Max-Height Back to 0 Not Working
Crop an Image to Square Using Percentages and Max Widths
Polymer Core Transitions for Animated Pages with Core List Content
How to Make an Entire Div Clickable with CSS