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.
Related
here is my code:
.icon-checkmark-usp:before {
content: "";
font-family: icomoon;
src: url(fonts/icomoon/icomoon.woff2) format("woff2");
speak: none;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
z-index: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-o-transform: scale(1);
text-rendering: optimizeLegibility
}
HTML:
<div class="usp-bar"><div class="usp-items"><i class="icon-checkmark-usp">Items</i></div></div>
The problem is, Developer Tools says now "Unkown property name" # src and cross it out - so I don't get the item (normal check item) intead I get 
Do someone know what the problem is?
Edit: I did the definition of the font with #font face
#font-face {
font-family: icomoon;
src: url(fonts/icomoon/icomoon.woff2?2was9q) format("woff2");
}
.icon-checkmark-usp {
content: "";
font-family: icomoon;
speak: none;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
z-index: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-o-transform: scale(1);
text-rendering: optimizeLegibility
}
But it's still not working.
If you want to use web fonts, you must use #font-face to specify the font. See: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
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 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>
I was using font awesome icons and it was working well.
When i needed some more icons i downloaded open web icons.
Now i copied openweb icons to my project and its related css also.
Font awesome css is having some rule like this..
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
OpenWeb icons css is having some rule like this..
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'OpenWeb Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: center;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}
So now, icons classes starts with "icon-"
Example <i class="icon-geo"></i>
now "icon-" makes conflict as both icons are making there own rules based based on it..
I can see it in bugzilla..
if i commented one of its font family, other font will work..
How should i overcome this problem..
It would be easy to just pre/postfix the class with a different identifier:
[class^="iconOW-"]:before, [class*=" iconOW-"]:before {
^^ ^^
font-family: 'OpenWeb Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: center;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}
You can then include them as you need to from a different class.
There are a number of web-font consolidation services that you might want to consider - fontello.com is one, which allows you to combine different icon-fonts (similar to and that includes font-awesome), but that doesn't currently include the open web icons font you're using.
Ping them and they may well include it - given the value the font set offers!
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.