Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  9 3222
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?


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
Har du en mappe som heter "fonts" med skriftfilene?
Ut ifra det jeg ser i CSS'en må denne "fonts"-mappen ligge et hakk over selve CSS-filen

Virker det om du gjør slik?

HTML-kode

<!DOCTYPE html>
<html>

	<head>
		<title>Business</title>
		<meta charset="UTF-8"> 
		<link rel="stylesheet" href="fonts.css">
		<link rel="stylesheet" href="bootstrap.css">
		<link rel="stylesheet" href="style.css">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.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>
Gjest
Trådstarter
4 0
ja har en mappe med alle fontene!

listen ser sånn ut:

/fonts
bootstrap.css
font-awesome.min.css
fonts.css
style.css
index.html


jeg prøvde med kodene dine og det virket altså heller ikke.

har prøvd flere ganger med <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Det er veldig rart at dette ikke virker å kjenner jeg blir gal etter å søke rundt på nettet etter svar.

Nekter å tro at du får til dette selv på din PC. kanskje du skulle prøvd for å sjekke om du får det til?

Utrolig nokk så får jeg det til her: http://www.bootply.com/zTGoly3fyE

men fra min pc hjemme i stua går det altså ikke. skjønner virkelig ikke hva som er problemet..

Nå fant jeg ut at denne kodesiden ikke får det til: http://jsfiddle.net/eyLdwm3d/
å da brukte jeg samme kode som jeg brukte på bootply.com.

Så NÅ er jeg virkelig forvirret.

hva er det som må til for å kunne bruke fonten skikkelig?

Sitat av curx Vis innlegg
Har du en mappe som heter "fonts" med skriftfilene?
Ut ifra det jeg ser i CSS'en må denne "fonts"-mappen ligge et hakk over selve CSS-filen

Virker det om du gjør slik?

HTML-kode

<!DOCTYPE html>
<html>

	<head>
		<title>Business</title>
		<meta charset="UTF-8"> 
		<link rel="stylesheet" href="fonts.css">
		<link rel="stylesheet" href="bootstrap.css">
		<link rel="stylesheet" href="style.css">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.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>
Vis hele sitatet...
Dette er bare galskap!
Sist endret av random59904; 20. oktober 2015 kl. 23:42. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
Sikkerhetsklarert
Prøver å lage en kopi av oppsettet ditt, men mangler hva du har i fonts.css..

Såvidt jeg ser av filene du har postet her så bruker du jo ikke fonten noe sted, annet enn at den er definert i css på et <ul> element.

Jeg la inn et par kamerikoner som en test. Og det fungerer fint..

Kode

<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
http://bildr.no/thumb/ZG1ycWVY.jpeg

Husk at med default css`en som følger med font-awesome pakka så må du ha /fonts/ mappa et helt nivå utenfor der du har html filene dine. Altså ikke slik du har tegnet det opp. der du har fonts som en mappe et nivå under html filene.

Om du bruker chrome så trykk F12 og sjekk i konsollet om du har noen feil til filer som ikke finnes e.l
Sist endret av Pjukern; 21. oktober 2015 kl. 00:35.
usertitle import
bleh's Avatar
Hele greien virker merkelig, for som Pjukern sier er det ingen grunn til at det ikke skal fungere. Vil anbefale deg å poste noe mer oversiktlig neste gang, sånn at man enkelt kan se mappestruktur og sjekke aktuelle filer.

Har brukt FA masse, også sammen med bootstrap, og det har fungert prikkfritt hver gang..


https://fortawesome.github.io/Font-Awesome/get-started/
https://fortawesome.github.io/Font-Awesome/examples/

Generelt vil jeg anbefale deg å sette deg grundigere inn i html,css - for du kommer bare så langt med copy&paste.

EDIT:

Leste gjennom tråden en gang til, gikk glipp av litt ser jeg..

jeg prøvde med kodene dine og det virket altså heller ikke.

har prøvd flere ganger med <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Det er veldig rart at dette ikke virker å kjenner jeg blir gal etter å søke rundt på nettet etter svar.

Nekter å tro at du får til dette selv på din PC. kanskje du skulle prøvd for å sjekke om du får det til?

Utrolig nokk så får jeg det til her: http://www.bootply.com/zTGoly3fyE

men fra min pc hjemme i stua går det altså ikke. skjønner virkelig ikke hva som er problemet..

Nå fant jeg ut at denne kodesiden ikke får det til: http://jsfiddle.net/eyLdwm3d/
å da brukte jeg samme kode som jeg brukte på bootply.com.

Så NÅ er jeg virkelig forvirret.

hva er det som må til for å kunne bruke fonten skikkelig?
Vis hele sitatet...
Altså...du har ikke peiling, gutt, og du burde være glad for at noen gidder å prøve å hjelpe deg. Å bruke FontAwesome er forenklet ned til et nivå der den gjennomsnittlige husmoren kunne klart å legge det inn, så lenge de hadde kunnet lese engelsk.

Det står rett frem hvordan man legger inn FontAwesome. Er du litt smart leser du deg opp på teknologien som ligger bak, så skjønner du kanskje litt mer av hva som foregår og.
Sist endret av bleh; 21. oktober 2015 kl. 01:08.
Sikkerhetsklarert
Vel ingen grunn til å ta fra han all motivasjon heller.
Problemet er bare at han har mappestrukturen feil. Løses lett ved å flytte /fonts/ mappa, eller endre adresseringen i css.

Du har det slik (ref innlegg #3)
/htmlmappa/fonts/
/htmlmappa/index.html

I css filen så addresseres fontene slik: "../fonts/font-awesome.woff"
Altsp du må legge fonts mappa di et nivå høyere i strukturen enn den mappen du har html filene.
ELLER redigere alle adressene i css filen til å gå mot "/fonts/font-awesome.woff" // Dvs ta bort ".." som betyr opp et nivå.
Gjest
Trådstarter
4 0
Takk for tips alle! Fant ut av problemet. Og det var at FontAwesome ikke var en skrift type men en ikon-font hahaha å jeg som søkte nette rundt å ikke skjønte hva faen jeg holdt på med. Trodde det var en font som ble brukt på en annen side men viste jeg å være en annen font. 2 dager tok det å løse dette problemet.

man kan mildt sagt si at jeg føler meg bra flau.
Sikkerhetsklarert
Hehe.. Javel.

Da vet jeg egentlig ikke hva du forsøkte å oppnå. Du sa du fikk det til når du forsøkte her: http://www.bootply.com/zTGoly3fyE
Og der skrev du jo <i class="fa fa-search"></i> Noe som gir deg et forstørrelsesglass/søkeikon derav 'fa-search'.
Teksten du skrev under vises i default font


Å skrive med fontAwesome går ikke(*).
Det er bare til ikoner ja. Du bruker den f.eks i <i> elementet som jeg viste et eksempel av i post #4
Gjest
Trådstarter
4 0
Problemet var vel at http://jsfiddle.net/eyLdwm3d/ bruker en annen default font enn hva http://www.bootply.com/zTGoly3fyE bruker i sidene sine som fikk meg til å tro at d var noe rart på gang og at fonten bare funger på spesielle måter! Dumt! Men sånn gikk det..

trodde at fontawesome hadde font styling i tillegg til sine ikoner.

-You never learn anything by doing it right. ;D
Sist endret av random59904; 22. oktober 2015 kl. 00:14. Grunn: Automatisk sammenslåing med etterfølgende innlegg.
Sønn av kongen
Ru11er's Avatar
Til fontstyling bruker du Google Fonts: https://www.google.com/fonts

Et kjapt søk på Google/YouTube viser deg hvordan du implementerer det på nettsiden din.