How to use font-awesome from server

1
votes

I removed all @import rules from my style.css but then I lost all font-awesome icons that I had on my page. I figured I can get them back if I copied the small section that my page was actually using from www.maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

The icons are still missing and I don't know how to get them back correctly in my css. I suppose I need to copy the actual icons as images to my images folder and link to them somehow via css, but I have not succeeded.

This the section that I copied:

/*!
/ *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome*/
@font-face {
font-family: 'FontAwesome';
font-weight: normal;
font-style: normal
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
 }
 @-moz-keyframes spin {
 0% {
 -moz-transform:rotate(0deg)
}
100% {
-moz-transform:rotate(359deg)
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg)
}
}
@-o-keyframes spin {
0% {
-o-transform:rotate(0deg)
}
100% {
-o-transform:rotate(359deg)
}
}
@keyframes spin {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
.fa-play-circle-o:before {
src:url(../images/play-icon.png)
}
.fa-arrow-circle-left:before {
content: "\f0a8"
}
.fa-arrow-circle-right:before {
content: "\f0a9"
}

.fa-angle-up:before {
content: "\f106"
}

I then even downloaded all the fonts in a zip folder and placed the unzipped folder on my server and tried to link to it, but without any result.

The missing icons are the video play icons in the bottom and the to-the-top arrow. There are more on other pages but once I know how to link to them without @import I will figure out how to do the rest.

Any help is much appreciated. Kim

3
htmlcssfontsfont-awesome
Icons have nothing to do with font awesome graphics. – arkascha
What you are missing is to tell the browser where to get the font awesome from. You try to use it, but typically it is not installed on a client system, so you have to reference it inside your css. Please post your attempts to do so. Just telling "tried to link" does not help here. Show what you did, so we can help fixing it. – arkascha
font-awesome is a font, not an icon. The font awesome CSS file is going to be pointing to these assets. Are you unable to go to the font-awesome website and download the library for use locally or on your own server? – robabby
Robaddy, do you mean by "assets" in this case a particular folder? I have downloaded the fonts and they are on my server. I'm trying to point to them from style.css but it is just not working. When I look inside the folder, there is lots of stuff and one folder full of icons. – Kim Wist

3 Answers

0
votes

Copy all the font files (NOT THE CSS FILE) from your font awesome folder (EOT files, WOFF files, etc) to a folder named fontswhich should be in the same directory as where your html file is located in and copy the font-awesome.css file to your css folder. Then keep this line on your section

<link rel="stylesheet" href="css/font-awesome.css" />
0
votes

Your @font-face rule is missing the src styles that specify where the font files are:

@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  src:
      url('fontawesome-webfont.eot?v=4.1.0');
  src:
      url('fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),
      url('fontawesome-webfont.woff?v=4.1.0') format('woff'),
      url('fontawesome-webfont.ttf?v=4.1.0') format('truetype'),
      url('fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
}
0
votes

Thank you everybody the problem is now solved. I had a wrong font-awesome library. I downloaded it again from the actual site and it was much smaller. I didn't place a link to font-awesome.css in my header, instead I copied all font-awesome rules that I needed to my style.css and got rid of one css file like this. All the eot, svf, ttf etc. files are in fonts folder and style.css in css folder. With the correct library everything works now fine.

There is one more minor issue but it is browser based and I will open another discussion about that.

Thank you everybody for contributing. Kim