Heisann! kopierer posten min fra ett annet forum jeg ikke fikk noe svar fra her!
My problem is: I have tried many different tips and tricks to get the custom font FontAwesome to load on my website.
It does not show up in chrome or IE.
It has come to my understanding that there are alot of people struggling with this, although i can find other websites like http://templated.co/transit, that can load FontAwesome with no problem on their webpage(i found out after analyzing their template that they use JavaScript for make it work)
I used http://www.fontsquirrel.com/ 's generator to fix the css i would need to use. still does not work.
also tried simple css @font-face
@font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url("fonts/FontAwesome.ttf") format("ttf");
}
Noen som har peiling?
FontAwesome CSS:
<link rel="stylesheet" href="font-awesome.min.css">
My problem is: I have tried many different tips and tricks to get the custom font FontAwesome to load on my website.
It does not show up in chrome or IE.
It has come to my understanding that there are alot of people struggling with this, although i can find other websites like http://templated.co/transit, that can load FontAwesome with no problem on their webpage(i found out after analyzing their template that they use JavaScript for make it work)
I used http://www.fontsquirrel.com/ 's generator to fix the css i would need to use. still does not work.
also tried simple css @font-face
@font-face {
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
src: url("fonts/FontAwesome.ttf") format("ttf");
}
Noen som har peiling?
Kode
<!DOCTYPE html> <html> <head> <title>Business</title> <meta charset="UTF-8"> <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="fonts.css"> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="nav"> <div class="container"> <ul class="pull-left"> <li>Brisk</li> </ul> <ul class="pull-right"> <li>Hjem</li> <li>Bakeri</li> <li>Reklame</li> <li>Kontakt oss</li> </ul> </div> </div> <div class="text"> <a href="#">click</a> <a href="#">click</a> </div> </body> </html>
Kode
.nav { background: url("http://p1.pichost.me/i/11/1344899.jpg"); background-size: cover; height: 500px; } .nav .container { width: 100%; } .nav ul { font-family: FontAwesome; padding-right: 30px; } .nav li { line-height: 80px; display: inline-block; font-family: FontAwesome; font-size: 20px; padding: 10px; } .nav li { color: lightgrey; font-size: 20px; font-weight: none; text-decoration: none; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; } .nav li:hover { color: darkgrey; }
FontAwesome CSS:
<link rel="stylesheet" href="font-awesome.min.css">
Kode
/*! * Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);...bla...bla...bla