@font-face {
font-family: 'icomoon';
src: url("../icons/fonts/icomoon.eot?iqfpkj");
src: url("../icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("../icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("../icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("../icons/fonts/icomoon.svg?iqfpkj#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}
The file paths (ex. /icons/fonts/icomoon.eot) to the font files need to match, relative to the stylesheet, whatever directory structure you have on your web server. "../" of course means up one level in the directory hierarchy from the stylesheet. So yes, "upload them and point to that directory" from the stylesheet![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;
}
This definition says use the "icomoon" font family for any class starting with "icon", example:@font-face {
font-family: 'icomoon';
src: url("./icons/fonts/icomoon.eot?iqfpkj");
src: url("./icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("./icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("./icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("./icons/fonts/icomoon.svg?iqfpkj#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-arrow-right:before {
content: "\e603";
}
3.) I add this to the body.
Open in new window
Turning the arrows 90 degrees is handled in the css with transformations like this:Open in new window
And this:Open in new window
You could also use Font Awesome fonts for this.