gebruik flaticon

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Ik wil voor een nieuwe klant gebruik maken van deze template: https://colorlib.com/preview/theme/whisper/

Daar staan op de homepage een aantal vector of png bestandjes. Die komen blijkbaar van de website flaticon.
Bij de eerste (de hamer) staat in de broncode: <span class="flaticon-auction"></span>

Als ik nu die hamer wil veranderen in een ander vector of png bestand, hoe doe ik dat dan?

Als ik naar https://www.flaticon.com/ ga kan ik daar wel hele pakketten met bestanden downloaden maar ik zie nergens hoe ik deze kan implementeren op mijn website.

Gr. Rob

Schermafbeelding 2020-05-28 om 13.17.41.png
 
Ik gok dat de makers van die template de svg gebruiken als background-image in de CSS.
Als je verder in de developer-tools kijkt, moet je dat wel kunnen zien.

Update: Je kan zelf gewoon icon's samenstellen voor in de CSS:
https://www.flaticon.com/iconfonts
 
Laatst bewerkt:
In css/flaticon.css van de template staan maar 12 icons.

Alternatief is Font Awesome 5 Free, die heeft circa 1600 gratis icons (en ook betaalde icons).
https://fontawesome.com/icons?d=gallery&m=free
Je kan op de Font Awesome website makkelijk een icon zoeken en je hebt dan direct de html.
 
Laatst bewerkt:
Als ik nu die hamer wil veranderen in een ander vector of png bestand, hoe doe ik dat dan?
Klik om te vergroten...
upload wat jij wilt in plaats van die hamer naar je site; verander dan de link van de hamer in de css in de naam van je eigen plaatje.
 
Het gratis icon pakket "Font-Awesome 5 Free" (ca. 1600 icons) kan je makkelijk op de website zetten.

1. Downloaden
Ga naar https://fontawesome.com . Klik op Download => Free for Web

2. Uploaden
De zip uitpakken en alleen de mapjes /css en /webfonts uploaden naar mapje /fonts/fontawesome-free-5/ van je eigen website

3. Toevoegen aan website pagina's
Zet dit in de <head> van de html om de icons toe te voegen.
Code: 
<!-- load font awesome webfont -->
<link href="/fonts/fontawesome-free-5/css/solid.min.css" rel="stylesheet">
<!-- load font awesome icons -->
<link href="/fonts/fontawesome-free-5/css/fontawesome.min.css" rel="stylesheet">

4. Icons zoeken voor je pagina
Zoek de icons die je wilt hebben in de Font Awesome Gallelry https://fontawesome.com/icons?d=gallery&m=free
Kopieer de "html code" en plak deze in je eigen website pagina.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan