Wilt u pictogramlettertypen toevoegen aan uw WordPress blog ? In deze vakantieperiode wil iedereen zijn blog meer personaliseren om een ​​beter beeld van de laatste te bieden. Lettertype-iconen maken deel uit van de arrangementen die regelmatig worden gemaakt.

In deze tutorial laat ik je zien hoe je icon-fonts kunt toevoegen aan je WordPress blog.

iconfontswp-1

Kleine precisie op lettertypen-pictogrammen

Lettertypepictogrammen bevatten symbolen of pictogrammen in plaats van letters en cijfers. Deze pictogrammen kunnen eenvoudig worden verkleind via CSS-code zonder de grootte van uw pagina's aanzienlijk te beïnvloeden.

icomoon

Pictogramlettertypen kunnen worden gebruikt om vrij algemene symbolen weer te geven. Op een doorsnee website kunt u ze gebruiken om een ​​winkelwagenpictogram, downloadknoppen, schuifregelaars, op sociale-mediaknoppen en zelfs in WordPress-navigatiemenu's weer te geven.

Er zijn verschillende lettertypen-pictogrammen beschikbaar met verschillende opties. In feite wordt elke WordPress-installatie gebruikt Dashiconsdat is een set lettertypeset. Deze pictogrammen worden gebruikt op de gebruikersbalk van het dashboard.

Hier zijn enkele lettertypen-pictogrammen-projecten:

Voor deze tutorial gebruik ik Font Awesome, dat trouwens een van de meest gebruikte en gratis pictogramlettertypen is.

We zullen onderzoeken hoe u pictogramlettertypen kunt toevoegen aan uw WordPress theme. De eerste methode wordt gedaan met behulp van een plug-in en we zullen u ook laten zien hoe u dit kunt doen zonder een plug-in.

Hoe lettertypenpictogrammen toe te voegen met een WordPress-plug-in

FontAwesome wordt ondersteund door verschillende plug-ins. Met behulp van een plug-in kunt u eenvoudig een lettertypepictogram aan uw thema toevoegen zonder de broncode te wijzigen.

Het eerste dat u hoeft te doen, is de plug-in installeren en activeren Beter lettertype geweldig, beschikbaar op WordPress.org. Na het activeren van de plug-in, moet u naar de volgende locatie navigeren: " Instellingen> Beter lettertype Awesome“, Om de plug-in te configureren. Deze plug-in kan echter zonder configuratie werken, dus gebruikers hoeven eigenlijk niets te veranderen.

betterfontawesome

Met deze plug-in kunt u pictogramlettertypen als volgt toevoegen:

[icon name = "rocket"]

[icon name = "cloud"]

[icon name = "koptelefoon"]

U kunt de pictogrammen op de interface voor het bewerken van artikelen toevoegen door een keuze te maken uit de beschikbare pictogrammen. Maak gewoon een nieuw artikel en je ziet het pictogram " Knop Pictogram invoegen Op de werkbalk van de visuele editor.

Als u erop klikt, wordt een nieuw venster geopend waarin u een pictogram kunt zoeken en invoegen.

fa-posteditor

U zult merken dat de plug-in een soortgelijke knop toevoegt als deze:

[icon name = "university" class = "" unprefixed_class = ""]

Als u meer aanpassingsopties wilt toevoegen, kunt u uw eigen klasse toevoegen voor aangepaste styling.

[icon name = "university" class = "myclass" unprefixed_class = ""]. U kunt als volgt de klasse van uw pictogram aanpassen:

.fa-maclasse {font-size: 100px; kleur: #FF6600; } 

Het is echt zo simpel. Je merkt dat de klasse wordt voorafgegaan door "fa-". Vergeet deze niet toe te voegen aan de CSS-code.

Hoe u handmatig een pictogramlettertype op WordPress kunt toevoegen

Zoals eerder in deze tutorial vermeld, zal ik je laten zien hoe je een pictogramlettertype toevoegt jouw blog handmatig.

Sommige pictogramlettertypen, zoals Font Awesome, zijn beschikbaar via CDN-servers over de hele wereld en kunnen worden gekoppeld jouw blog direct.

U kunt de bestanden van dit lettertype-pictogram ook rechtstreeks naar de map van uw WordPress theme. Ik laat je zien hoe je het Font Awesome-lettertypepictogram toevoegt jouw blog.

Eerste methode: 

Dit is de gemakkelijkste methode. U hoeft deze regel alleen maar toe te voegen aan de " »Van uw thema (meestal staat het in het header.php-bestand).


Deze methode is eenvoudig, maar kan veel conflicten veroorzaken met andere plug-ins. De beste aanpak is om de scripts van WordPress te laden om ze aan de wachtrij toe te voegen.

wp_load_fa functie () {wp_enqueue_style (WPB-fa ',' https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); } add_action ('wp_enqueue_scripts', 'wp_load_fa');

Tweede methode: 

De tweede methode is niet de gemakkelijkste, maar u kunt er pictogramlettertypen in uw thema gebruiken. Het enige dat u hoeft te doen, is uw pictogramlettertypepakket downloaden en uitpakken (gecomprimeerd bestand) in het bestand "Lettertypen" van je thema.

U hoeft alleen het lettertypepictogram te downloaden en de naam ervan te wijzigen. Wat u vervolgens moet doen, is het pictogramlettertype van uw server laden.

ftpupload

Nu je klaar bent om de pictogrammen-lettertypen in je WordPress-thema te laden, hoef je alleen maar de volgende code in het bestand toe te voegen " functions.php »Van uw WordPress theme of in jouw WordPress Plugin.

wp_load_fa functie () {wp_enqueue_style (WPB-fa, get_stylesheet_directory_uri () '/fonts/css/font-awesome.min.css.'); } add_action ('wp_enqueue_scripts', 'wp_load_fa');

Dat is alles wat er is.

Hoe lettertypepictogrammen op uw blog handmatig weer te geven

Ga naar de Font Awesome-blog en bekijk de lijst met beschikbare lettertypen. Klik op een afbeelding en je ziet de code voor die afbeelding.

fa-optinmonster

Kopieer en plak de volgende code gewoon:

<i class="fa-optin-monster"></i>

In teksteditor-modus. U kunt de klasse gebruiken om een ​​wijziging aan te brengen in het lettertype-pictogram.

Als je meer wilt weten over CSS, nodig ik je uit om Lees deze tutorial. Dat is het voor deze tutorial. Deel het gerust met je vrienden op je favoriete sociale netwerken.