font-awesome-4.5.0

Status
Niet open voor verdere reacties.
femke98

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.678
Ik maak een website in html, deze maak ik vanuit een bestaande.
Deze gebruikt de font-awesome-4.5.0 en je kan volgens de makers makkelijk deze vervangen.

Maar wat ik ook doe, het werkt niet.

Code hoe het nu is:
Code: 
<i class="fa fa-4x fa-bicycle tm-home-fa"></i>
(https://glasheldercoach.nl/)

En de code zoals ik hem erin zet:
Code: 
i class="fa fa-4x fa-shoe-prints tm-home-fa"></i>

Helaas wordt er niets neergezet, veld blijft leeg. Ook als ik dit doe:
Code: 
i class="fa fa-4x fa-shoe-prints"></i>
of deze zonder de fa-fa-4x
Het is hem allemaal niet.

In de head staat:
Code: 
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">                
    <!-- Font Awesome -->
Dus dat is oké.

Wie helpt?
 
Een kleinere testcase lijkt mij interessanter.
Ik zie gewoon icoontjes.
 
natuurlijk zie je icoontjes, die staan er standaard in.
Maar die van mij komen niet, zie screenshot
 

Bijlagen

  • Screenshot 2022-05-10 at 12-19-22 Upper HTML Website Template.png
    Screenshot 2022-05-10 at 12-19-22 Upper HTML Website Template.png
    569,6 KB · Weergaven: 24
Ik meen dat je voor sommigen een betaald abonnement moest hebben, als ik mij niet vergis. Misschien is dat het?
 
Ja, maar het kán zijn dat deze uit een betaalde set komen.
 
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
Klik om te vergroten...
Heb je een mapje font-awesome-4.5.0/css/ met daarin bestand font-awesome.min.css

In dit bestand kunnen bovenaan @import staan met daarachter een bestandsnaam.
Als dit er staat, heb je die bestanden dan ook?

Je kan dit
Code: 
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">

vervangen door dit (laatste V4 versie van een CDN)
Code: 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Even gekeken bij V4, daar zit geen enkel icon in met "shoe" in de naam https://fontawesome.com/v4/cheatsheet/
Je zal dus V5 of V6 moeten gebruiken. Alleen de "solid" icons zijn gratis, de rest niet.
 
Laatst bewerkt:
Met de laatste versie V6 van Font Awesome heb je wel de "shoe" icon.

In de head
Code: 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

Zet dan de icon ergens in je pagina
Code: 
<i class="fa fa-4x fa-shoe-prints tm-home-fa"></i>

Ik kan zo gauw het compactere bestand (met alleen de gratis icons) niet vinden.
Nadeel van bestand "all.min.css" is dat het 100 kB groot is.

Nog even verder gekeken.
In bestand "all.min.css" worden alle gratis icons (Free and Brands) van V5 en V6 geladen.
 
Laatst bewerkt:
Je bent geweldig. Ik was er al achter dat de icons niet werden gezien omdat het een andere versie betrof.
Het lukt mij nu wel. Super!
 
Graag gedaan. Suc6 met maken van de website :thumb:
 
Font Awesome 6

In de bijlage is het Font Awesome 6 bestand (fa.css) verkleind van 100 kB naar 7 kB.
Het is een "minimum" bestand. Icons kan je zelf op deze manier toevoegen:
Code: 
.fa-NAAM::before {
    content: "\UUUU";
}

Op pagina https://fontawesome.com/search?m=free vind je
- alle gratis en open source icons.
- bij elke icon de naam (NAAM) en Unicode (UUUU) van de icon.
 

Bijlagen

  • fa6.zip
    2 KB · Weergaven: 27
Dank je wel! Inmiddels wel andere afbeeldingen maar het is natuurlijk altijd fijn om wat te leren! Dank daarvoor!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan