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
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.
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=""
I'm trying to get my icon font to work and I need to exclude icon-blue
[class^="icon-"], [class*=" icon-"] {
font-family: 'fontname';
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;
}
How can I do this?
First
[class^="icon-"], [class*=" icon-"]
dont make sense because [class^="icon-"] is included in [class*=" icon-"]
To exclude you can use:
[class*="icon-"]:not(.icon-blue)
You have a full example to play here:
http://codepen.io/luarmr/pen/dozjZW
You can use the :not() selector like
[class^="icon-"]:not([class="icon-blue"]),
[class*="icon-"]:not([class="icon-blue"]) {
font-family: 'fontname';
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;
}
[class^="icon-"]:not([class="icon-blue"]),
[class*="icon-"]:not([class="icon-blue"]) {
background: green;
}
<div class="icon-red">test</div>
<div class="icon-yellow">test</div>
<div class="icon-blue">blue</div>
<div class="small-icon-red">test</div>
Note, you can simplify your selector to just
[class*="icon-"]:not([class="icon-blue"]) {
since *= will cover the ^= cases also.
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,d09GRk9UVE8AAA6UAAsAAAAAFWwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAACyoAABBCZgM60UZGVE0AAAw0AAAAGgAAABxmNjQcR0RFRgAADFAAAAAdAAAAIAA9AARPUy8yAAAMcAAAAEsAAABgLr7a+2NtYXAAAAy8AAAAWgAAAXagYtN7aGVhZAAADRgAAAAwAAAANv61BMJoaGVhAAANSAAAACAAAAAkBJEBhmhtdHgAAA1oAAAALQAAAEAYMwCqbWF4cAAADZgAAAAGAAAABgAQUABuYW1lAAANoAAAAOcAAAGSFGwJ33Bvc3QAAA6IAAAADAAAACAAAwAAeJxtV3lYlWUWP9+Fy72x3JDFfFwukriSCooiiooLqdmIWhoZlSIqmksuREmu6BP6KSpqmYqauTSOmoOG0rg1LqhkSjRo0qAxhBWCeEW4KnDmd77vg57mmfvHec/3vuc923u2q5CrKymK8szYSQnTJ82ePIUUEyk0wNnF5Ax2cbZwVT1dVE9XuzsFuaxkVW1CPC2rox8vdvqbW1Pts62JvFsrzZu1Jq/W3l4+1Ex4WOlZak5tKIiCqQdFUBQNo1E0juJoMs2gebQwafb0F0NCQrBEh4RE68sQfRmqL4P1ZZC+ROhLuL701pcwfempLz30JVRfDNa9Gm1rspFI+UhJU1YpqxVVWaOsVdKVdcp6ZYOSoWxUNimbyVsMMJEXOZQC0zGXfeZjbuGWvZZia6X7Sc8kzxyvcbYC29Myp59rXZgzzGJzbmfTv8d0YhpU0NOf6dmUPcyOzUuZqGMV8+8txjJXnQTmmPobsJwtwCZ/zHzXu5SZi09g76MjTF7Tgq3Mz+fOZDpzloBdOcscFUVmnK+YIByXyZ1fwDZwuHCsxJ2dp4Flvwjs0+dwEDyEyf/uYdFhH/ZmLLEy1YKaCvu2MTNZWx9ksljnMblnOZhcersB23AAWmz5AVj6eLCY1kU/5brLdfoNdtamW22BTIPPRDJ9WbIONmZudDJPHHYfTD0sh5irv+8KLncuMFfwInwW9AR4HGscaJgcEAVE6p/k8cK3MDemcgtTVlIUjHwSAQvMRe2Y60dPhpo5IKJXsoFlZoH3wZcEO8pk+jJTTj8F8cXfAW7tgpFHmh0QPqmaPi8AdB2dqUsDWgCRzh9E5FUR3lwO+jFX0mA5GCtKztYM3BtXaRjI8e+shIHDe5iF5BUh6WZc0+wwWMU2shfMh1J1EvJw+0Ij0RQrF8UGmhvVhYGNJsQ2mZXVZOpRMT9eN9BwiRjY6KiBmj7/0gz8oNGdmothIDCHYJvA92c33UC447B2YLXlsDL6mytMk77zwwuGdG/JvGjJh8wDB69XBY5SZXcH0/KlqWbgo/xSmNoGwNrBHxQxDZPwGM4IuNt3UlU785y595gGDLLAW//oNJ/13w+Jj5jCTnbG/VYZDkA3G865A0xvF/MmNP4R7jfnd0Bo+cLgPuHuTKEheO9OHRG24V2W4ErvpHOAodZQ5sJc7Fqr4pkv/biVSfEuY368CPHQcB/qF3f4DZo/Fkdz6SwbpE+BXnlDbkCjF9bYbUzJucGszA3a7t8Wct4OS+GG8uWesN68pD+TZ/VJMD8EMo8lZwAKoJDtVHcwu1I2TYw5DTXaXGzPNKH/QxWSSk2j4P/aU+8iJ1YjO6sd8PzjWG+81AfP4WDsEXwOr2F+lIIwbij7AnRl7ZFKrRKYH/pIUv36CKcVo/HK5QiwB6/fAt2jc8ju/tWQe3tTA1LSlA4NfZ/PZ3J18UVc5c6CwslroXCFDSF1uQqhWpvlAJH3VPjVK6YY94+vYb7/aYsAbjgR2sEiODRyHHleQKB8Nrdzw9ZlVxAX9zdMlwvX5OptYfJbgMrKsO9uIUi9Jf+9hocK6IHP2VvsTPbd+fAESb6c2zfVbDw1WOqkmgQhVaFdm+xLbrpi2k8XAaBqm1ZhozBFvo7XfK8oQWM7tJGtzlEzR+M49Xf7Hwx/bWJ4588MwcuimebKVJF9mRsKi+BunxHhFlY8ZmWwsnxEH7y/rdbCVLKUWFmyixCTyyWCtq5HQO0/1pd5o9cGHdCUOTjYf2AA0yLvsgDmC+sDLXh9WlUQxjRxfBpTC0+I9Z8WzNTxyVsI7HVI5xb7piJ9sv4Owl6H/XA+0zFH50+x4/6pibPbak2s5LXcxfQ3k0Sh5zwEzMMPKxFa5aeTga4dLSAGkVB9UAdmjcAA5affU3WUPFN9QHBzYQl0WGnH7tBUn2BVLWc+w2jQwcGi8cn6aqTQgwMaEE4r28r1e//DydeQRx6vOM1/8AcDv4hYDTXk0fHbkRpAoCjL8CouJk9gn+UhZiGFTIufaEBYjbxo8CO3nWcBPlmDXDu/Dec/ox9ZxTzevFywZxADMxbrp1xvPyHEa5FIiQuET1wXww8ad64XscpnV4C5BelacF09coc+Of0+as7eUn/1qd/IPDXPjLy+mn3ZNRCZ328W3jULYSAwnPkvCBMBbhInfTTgb9A1D3S3oZTyVdzYnXXE3wjYmOvxUOHj+yiPC6VxrTiKDpc49x7i40j3TDeDKqx7K/j2+h5ULxcUoaIJiI4gdA4umoqOECQGXhsDR/lFoVN+G5ooCUNt0NTWfljprwlBjJZKO8ipR5GLDu3I3HJiqiZkB4TkbEMWTL/WEtbC8zxsSinqHV//hRvutvNpVNW+AnW2xfn3DYBPEdO0y3f7paE/pHxuAO3z/+w13Q6wsbINYwr5/7VOK53oOU+Wnkf81LYPkNLnB7BuB5xSIr4sGREu3TxtnlBdEKK2qnZBuwqq8xndxNMF5qbdfgg1K0YGjbdORcrWEgE/o+pKb29V4yp1Z0RvGHn4JrA9xcBKMRdxMh6OriJz/mMJZv51L1xS1Bvv++ABAv1GUTtYz7s/92U+NiaRaaRMS2+OG2iAkYe3GODNuAoBh+TzY51YrqE08o2SfINdkTywJqIEnVAXy4uTG1XJlCEhO00UXQgbWlWON9Q3rCkxN9nYV0zuoTb58wK0HL51J+rdPSu8HJG4wKh33dJCANbdBo7OThGTLOAcMRGezRdO3cTRFyVhNJCfnC4AzeDizkjZSzdI8qWBRCTOR1dUXpOLCzK6Qk5nJc0Im8BhKEbFZwfB3sKay1YNygYZoLDmkgHkkwKjBuG2tQa1h5RL88FkMsqEsnsUMDsCRzkrFr09UwaJNxLwdo9WD4Cd8aOQzkNeRdKuzUCpeS1dtf6Ja5+xotMqzAOPi0SI7IWghnZ+pk8A8ibbFfx8TmBmq30fE53XIrRix6un4JF1MUjNXlM+kyjpi7RzHS/PMCcO2IIGXHLdKOUEbHRLddaa9RowrI8SZa4YoPjMaQFgU1jrjicvz1sB51TkbDXmYscuRK9Xy52wYM75NzA1hKfjfWnLGFjXzkcwTAZ1vk5celrWHrD6/HbUrZG5cMb8JGyqJuaa96Kh13o5yRl/Gfe9kOPkjfJCfpId7neg53NhDaoVD7frZdCWb0tA+0q7H8f8zjAMd+8kQetVQduZNslQInuU7I0atAl+ok0J27VOi4NtCRYbhpl73A89sCpe5rK3ESPZsXiJ3OMvq3DdHf9voPepucxlbVeoyO5rn2BMeCl+HSaKh/HIgnMTdgG4TlAlNuGakG/wX2Tf9K/lW0EfuDYQHC8oefJ9HXNs5N6JTH0TJjSOUxFfnTPmB4pXhzIliAW1h75XYV8NK6eyL7HS1gW1jAtTguDizlLUD32P0TDuoOztQ0Lhpbm2AuPe05o0mRpSCzEuDYWIu7lVTM1ckL2l+6ugwXcxdyR7T6GU3vJbKBtj58jAGDkDRv4kL5jRFZE6Ew/4eH8VYP3xlzGPFbUzq8aMM9iB/0mtDiONHZ1qmKJ79pQ5sLjFRuavv72qbWA03S/dlm92+gp/xnb0Eq0xm3vduCY92BNzLd+UvwbRPb6EBQt3Cu1PR/H/ydF+dyPtrbeEtu90lOdLu1I1kapVpmffJLEa02Tqu3vsQpOZchd/16Iw2WfUoU8nIenppa8xEvXLvY/U6I1YHnluHOyrwTgU0RqWKvK/w+IBZys9ncCiUsHGsnkZQsn9UAaUqevfXbXbnGF+tWX+qqc7/sf7kklRfCB1nwSOlHV6PWi7xUNvn0091OLxX9rW2VAAAHicY2BgYGQAgpOd+YYg+lxYUimMBgA/4QXqAAB4nGNgZGBg4ANiCQYQYGJgBEJ+IGYB8xgABO8AQgAAAHicY2BmnMM4gYGVgYORj1GZgYHBCkofZxBhyGZgYGJgZWaAAwEEkyEgzTWFweEBwwcGxob/DxhUGRsYXBsYGBjhChSAkBEAzzIKuwB4nOWNyxGAMAhEHxrz8X/yZFkWYsmUYAeRRK3CZRhYZncBWp7eEQpOY1K547DZE2ms0KDzRc5FpGj6dlilOiJbpTMTI4M5F5JdA57OUl1JEc/76L+4ASlEC0sAAHicY2BkYGAA4kO6n1/F89t8ZeBmXAAUYTgXllSKoP/vZnrJ2ADkcjAwgUQBY3sMQHicY2BkYGBs+L+bQZU5ioHhXwLTSwagCAoQAAB/PwUZeJxjXMAABsxRDCsYXgAZQMzYAMRAccajQHwAyp4NpaGY4Q2Q3svABABcLgrsAAAAAABQAAAQAAB4nH2OMW7CQBBFn8GQREQRSkGTZot0kS2vqeAAVmoKegtWliVkSwuUuUYOwBnS5hg5QM6QC+QvbJoU7Gp23sz82RngnncSwkm45THygBteIg955i1yKs1H5BETviKPlf+RMknvlJmeuwIPeOAp8pBX5pFTaU6RR8z4jDxW/psVNVtavR0bHKzqbVt3m0AKG47sVPQKXXPc1YKKXuLD2XspHIaSnEJ+Kfv/5SVrdTMWslJKq/Wo+u5Q9b5xpswLszR/o4XWZousLOycaxuuFXr2KoaNwoywBWvn923fGZsX19p/AXJxOz8AeJxjYGbACwAAfQAE) 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.