It may seem daunting but its actually really easy, head over to the icomoon app and choose/generate your font. Download it, now open style.css. At the top you should see the font-face selector. Copy and paste all that into your style, it will looks like this.
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?q377qp');
src: url('fonts/icomoon.eot?q377qp#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?q377qp') format('truetype'),
url('fonts/icomoon.woff?q377qp') format('woff'),
url('fonts/icomoon.svg?q377qp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Open your fonts and upload them to a host. Now edit your font-face to load up your fonts so everyone can see them. It will look something like this. NOTE: the "?q377qp" must be there.
@font-face {
font-family: 'icomoon';
src: url('http://example.com/mal/fonts/icomoon.eot?q377qp');
src: url('http://example.com/mal/fonts/icomoon.eot?q377qp#iefix') format('embedded-opentype'),
url('http://example.com/mal/fonts/icomoon.ttf?q377qp') format('truetype'),
url('http://example.com/mal/fonts/icomoon.woff?q377qp') format('woff'),
url('http://example.com/mal/fonts/icomoon.svg?q377qp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Now getting your new icons to work on your list. We will be using pseudo selectors for this. As an example you select your class. .myClass {}Now we use a pseudo selector (":before" or ":after" your choice) and add in your icon using its unicode value, the unicode will looks like a number that is prefixed with a random letter (sometimes it will have more letters), here is an example of a unicode value: "e905"
.myClass:before {
content: "\e9234";
}
NOTE: The backslash MUST be present. Now we will be giving our pseudo selector a font-family and improve the font rendering.
.myClass:before {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
content: "\e9234"; /*Icon unicode */
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Congratulations! You successfully used a font on one thing! To use different icons on different thing do the exact same thing with the pseudo selectors but select a different class/attribute/whatever and different unicode value for the icon. An example:
.myOtherClass a:nth-of-type(3):before {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
content: "\e903"; /*Icon unicode */
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
|
| Thank you for sharing the website ^^ I used it once, but forgot the name. |
 |
| I'm going to sound like an idiot, but how do you download the fonts from the site? I can select one but can't find an option to download? |
 |
Font awesome is great although the reason I used icomoon is because you can upload svg files to create your own font. |
More topics from this board
Sticky: » [General] INTRODUCTIONSremoved-user - Feb 17, 2016 |
40 |
by removed-user
»»
Apr 10, 2016 6:21 AM |
|
Poll: » What do you think about premium list designs?Shixma - Mar 25, 2016 |
0 |
by Shixma
»»
Mar 25, 2016 2:54 AM |
|
» [BBCode] Custom club banners!removed-user - Feb 20, 2016 |
5 |
by Storm-Sage
»»
Mar 10, 2016 12:09 AM |
|
» [GUIDES] Achieve better design with theseShixma - Mar 4, 2016 |
2 |
by removed-user
»»
Mar 5, 2016 4:01 AM |
|
Sticky: » [Guide] CSS TUTORIALSremoved-user - Feb 18, 2016 |
2 |
by removed-user
»»
Feb 25, 2016 1:39 PM |