Some of the web font's icons not loaded in firefox - css
I've already base64 encoded the fonts (which I built using icomoon's app) to prevent Cross-Domain issues with the fonts, but why do I have some of the icons missing? Everything looks perfectly fine on google-chome.
Chrome
Firefox (Facebook, Twitter icons missing)
#font-face {
font-family: 'Radiance';
src:url('fonts/Radiance.eot');
}
#font-face {
font-family: 'Radiance';
src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'),
url(data:application/x-font-ttf;charset=utf-8;base64,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AhwBAS48RmNjjGMlAhwCBAsEPAoKHgpjPVY9PVYAAAAAAQAA/+ABogGAACcAACUiByc2NTQnNxYzMjY0JiIGFRQXByYjIgYUFjMyNxcwBhUUFjI2NCYBVyIXkQgCkRUeHywsPSwCkBYfHiwsHhIRoQEsPSwsdRxHDxAECDYWLD0sLB4GCDUWKz4rCU8EAR4sLD0sAAABAAD/4AGhAYAACwAAJSM1IxUjFTMVMzUzAaCUd5WVd5TslJR3lZUAAf///+AA7QGBABcAABMjBiYOAh0BIxUzFzM1MzcjNTQ+ATsB7U4BEx8dFTo7AVo9DEoBEA44AYACBAoPKBs6Pc/PPTADCQ4AAQAC//MBvgFPADwAAAEHNRUUBwYHBicmJzI+ASciJx4BMj4DMS4BLwEeATI+AzEuAj4BMR4EMzcmNTQ2MzIXPwEHAb4qAwJccY8dEzc7BQEbOwMJCQkJBgQeKQUFAwkKCgoHBRQVAwMFBC05OyUBAwM1JSUfCCocASAqAQcKDHdKWzYLDBcOBTcDAwECAgETKAsMAwMBAgMBECUeGw8UIhUQBgEKECYyJAQcOAAAAAAAAAwAlgABAAAAAAABAAgAEgABAAAAAAACAAcAKwABAAAAAAADACQAfQABAAAAAAAEAAgAtAABAAAAAAAFAAsA1QABAAAAAAAGAAgA8wADAAEECQABABAAAAADAAEECQACAA4AGwADAAEECQADAEgAMwADAAEECQAEABAAogADAAEECQAFABYAvQADAAEECQAGABAA4QBSAGEAZABpAGEAbgBjAGUAAFJhZGlhbmNlAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAFIAYQBkAGkAYQBuAGMAZQAgADoAIAAxADEALQA5AC0AMgAwADEAMwAARm9udEZvcmdlIDIuMCA6IFJhZGlhbmNlIDogMTEtOS0yMDEzAABSAGEAZABpAGEAbgBjAGUAAFJhZGlhbmNlAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABSAGEAZABpAGEAbgBjAGUAAFJhZGlhbmNlAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgAAAAEAAgECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAd1bmlGMDAwB3VuaUUwMEUHdW5pRTAwQwd1bmlFMDBEB3VuaUUwMEIHdW5pRTAwQQd1bmlFMDA5B3VuaUUwMDcHdW5pRTAwNgd1bmlFMDA0B3VuaUUwMDMHdW5pRTAwMgd1bmlFMDAxB3VuaUUwMDAHdW5pRTAwNQAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwARAAEABAAAAAIAAAAAAAEAAAAAyYlvMQAAAADOVmJ1AAAAAM5WYnU=) format('truetype');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Radiance';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-back-to-top, .icon-arrow-left, .icon-arrow-right, .icon-person, .icon-calendar, .icon-comment, .icon-home, .icon-flickr, .icon-rss, .icon-search, .icon-share, .icon-add, .icon-facebook, .icon-twitter {
font-family: 'Radiance';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-arrow-left:before {
content: "\e00c";
}
.icon-arrow-right:before {
content: "\e00d";
}
.icon-comment:before {
content: "\e009";
}
.icon-rss:before {
content: "\e004";
}
.icon-facebook:before {
content: "\e000";
}
.icon-twitter:before {
content: "\e005";
}
I think your font files are corrupted, or not formatted properly. I downloaded one of the ttf files and can't open it in the OS, because it is "not a valid font file". You should try again to convert them from a decent source file.
Found what the problem was, it got ad-blocked.
Related
Add multiple custom icon fonts to CSS file dynamically
I have a html form generator like this. In this form generator users only can select a font icon from list. I did like it but I need to add new option that user can add custom font icons and uses it.
For implementing this option I try to do it like The Beginner's Guide to Icon Fonts in WordPress but I encountered a issue.
In downloaded custom icon font files exist a style.css file that I added content of them to my website CSS file (I have one CSS file and I can't add two css file for custom icon file) like this:
#font-face {
font-family: ico1;
src: url('fonts/ico1.eot?411a7m');
src: url('fonts/ico1.eot?411a7m#iefix') format('embedded-opentype'),
url('fonts/ico1.ttf?411a7m') format('truetype'),
url('fonts/ico1.woff?411a7m') format('woff'),
url('fonts/ico1.svg?411a7m#ico1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: ico2;
src: url('fonts/ico2.eot?gz3b2b');
src: url('fonts/ico2.eot?gz3b2b#iefix') format('embedded-opentype'),
url('fonts/ico2.ttf?gz3b2b') format('truetype'),
url('fonts/ico2.woff?gz3b2b') format('woff'),
url('fonts/ico2.svg?gz3b2b#ico2') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: ico2, ico1 !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
If user generates multiple icon fonts with same content ("\e901") like below:
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And uses this html file:
<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)
Only the first one ("ico1") is applied for both of i tags. I think this issues related to
font-family: ico2, ico1 !important;
Is there any way to do it?
Thanks advance.
I found a solution for you.
i {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1{
font-family: ico1 !important;
}
.icon2{
font-family: ico2 !important;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And in HTML:
<i class="icon1 icon-comprehensive"></i> // First font icon with .icon1 class
<i class="icon2 icon-document-center"></i> // Second font icon with .icon2 class
postcss-autoreset is overriding font-family with the browser's default
I'm using postcss-autoreset which applies all: initial; to any element I style in my CSS files.
But, when I try to set the font of the body element only elements that I haven't styled in CSS will get the font. Elements I have styled revert to the browser's default. Which is very odd.
all: initial; seems to be overriding font-face because when I view in Chrome inspector it's showing as overridden.
As an example below all my elements on the page are displaying with the Roboto font, except for text within header which is using the browsers default.
app.css
#import "variables.css";
#import "header.css";
#import "footer.css";
body {
font-family: 'Roboto';
margin: 0 auto;
display: block;
}
header.css
header {
padding: 10px 0;
}
config.js (PostCSS CLI config.js file)
{
"use": [
"postcss-import",
"postcss-cssnext",
"lost",
"rucksack-css",
"postcss-autoreset",
"postcss-font-magician"
],
"input": "src/app.css",
"output": "css/main.css",
"local-plugins": true,
"autoprefixer": {
"browsers": "last 2 versions"
}
}
Here is the output being produced by postcss:
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 100;
src: local("Roboto Thin Italic"),local(Roboto-ThinItalic),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YVQlYEbsez9cZjKsNMjLOwM.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-Yfk_vArhqVIZ0nv9q090hN8.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 300;
src: local("Roboto Light Italic"),local(Roboto-LightItalic),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 400;
src: local("Roboto Italic"),local(Roboto-Italic),url(//fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 500;
src: local("Roboto Medium Italic"),local(Roboto-MediumItalic),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0WfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 700;
src: local("Roboto Bold Italic"),local(Roboto-BoldItalic),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: italic;
font-weight: 900;
src: local("Roboto Black Italic"),local(Roboto-BlackItalic),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpWfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpY4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 100;
src: local("Roboto Thin"),local(Roboto-Thin),url(//fonts.gstatic.com/s/roboto/v15/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 300;
src: local("Roboto Light"),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUffY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: local(Roboto),local(Roboto-Regular),url(//fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 500;
src: local("Roboto Medium"),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: local("Roboto Bold"),local(Roboto-Bold),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
#font-face {
font-family: Roboto;
font-style: normal;
font-weight: 900;
src: local("Roboto Black"),local(Roboto-Black),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIvY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
header,
header .brand,
header nav,
header nav li,
header nav a,
header nav,
header nav ul,
header nav li,
body,
body {
all: initial
}
header {
background: #00AFEC;
display: block
}
header .brand {
width: 100%
}
header nav li {
display: block;
text-align: center
}
header nav a {
color: #FFF;
text-decoration: none;
font-size: 18px
}
#media (min-width: 361px) {
header nav {
width: 100%
}
header nav ul {
float: right
}
header nav li {
padding: 0 30px
}
}
body {
font-family: 'Roboto';
margin: 0 auto;
display: block;
}
Any idea why this is happening?
postcss-autoreset accepts reset option. By default it is just all: initial, which resets font. But I recommend to set reset in all: initial; font-family: inherit; font-size: inherit. So in postcss-autoreset you should explicit show what properties you really want to inherit. And you could set some inherit properties by default in reset option.
Normally the font-family is inherited by the parent element. So you may use a simple
html {
font-family: Roboto;
}
to make the whole page use the Roboto font, even though there is no font-family explicitly defined for your elements - they simply inherit the value from their parent which is html (or in your example body).
If you are using postcss-autoreset, all elements styled by you, will get the all: initial; property, which resets the font-family. Therefore these elements will NOT have the Roboto font-family.
Btw, I wouldn't recommend you to use postcss-autoreset. I simply don't see the point in using it, as it doesn't do much (only add 1 prop/value) and it kinda breaks the css inheritance concept with it. In my opinion people should use postcss primarily to balance browser-inconsistencies. Plugins like autoprefixer and postcss-fixes (yeah, some self-promotion here) do a great job. If you want to replace your preprocessor sass/less/stylus, some other plugins like precss might make sense, but this whole concept of adding many micro-plugins, leading to unexpected behavior and output, is IMHO too unstable and causes more problems than it solves.
how to use icon from ttf file using unicode
I am currently using <span class="icon-home2"></span> to show icons in my CSS file:
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?4r9x8o');
src: url('fonts/icomoon.eot?4r9x8o#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?4r9x8o') format('truetype'),
url('fonts/icomoon.woff?4r9x8o') format('woff'),
url('fonts/icomoon.svg?4r9x8o#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e900";
}
Now I have a different requirement in which I need show the icons, with content in CSS, using unicode that is mapped here:
.icon-home:before {
content: "\e900";
}
Can anyone tell me how can I achieve this?
I got the answer:
add in css file
[data-icon]:before {
font-family: icomoon; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
and access with
<i aria-hidden="true" data-icon=""></i>
remember to append &#x before unicode of icons eg icon code is e001 then data-icon=""
How to change Icon colour for iconmoon icons
I have downloaded some icons from icomoom but the icon background colours are black and white.I want to give my own colour.Can any body please tell me how to do?
When I downloaded the icon ,I got the following style.css
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-haa506');
src:url('fonts/icomoon.eot?#iefix-haa506') format('embedded-opentype'),
url('fonts/icomoon.woff?-haa506') format('woff'),
url('fonts/icomoon.ttf?-haa506') format('truetype'),
url('fonts/icomoon.svg?-haa506#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e600";
}
.icon-images:before {
content: "\e601";
}
.icon-pawn:before {
content: "\e602";
}
The icons should be treated as text.
If you apply a color to them. they will change their color.
Example:
.icon-pawn { color: red; }
I had to use the ::after pseudo element.
.icon-pawn::after { color: red; }
I'm not sure if this is peculiar to my project though, as I'm working on small changes to someone else's code.
This works for me:
.icon-color-success:before {
color: #28a745 !important;
}
and then:
<i class="icon-python icon-color-success"></i>
Custom font is displayed weird
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).