Slik legger du enkelt ikonfonter i WordPress Theme

Vil du legge til ikonfonter på WordPress-siden din? Nylig spurte en av brukerne oss hva som er den enkleste måten å legge til ikonfonter i deres WordPress-tema? Ikonfonter de tillater deg å legge til vektorikoner uten å bremse nettstedet ditt. I denne artikkelen vil vi vise deg hvordan du enkelt legger til ikonfonter i WordPress-temaet.

Hva er ikonfonter og hvorfor du bør bruke dem?

Ikonfonter inneholder symboler eller piktogrammer i stedet for bokstaver og tall. Disse piktogrammene kan enkelt endres ved hjelp av CSS uten å øke sidenes nedlastingsstørrelse betydelig.

Ikonfonter kan brukes til å vise brukte symboler. På en typisk nettside kan du bruke dem til handlekurven, laste ned knapper, funksjonskasser, skyveknapper, sosiale medier knapper og til og med i WordPress navigasjonsmenyer.

Det finnes flere gratis og åpen kilde ikon skrifter tilgjengelig med hundrevis av ikoner. Faktisk kommer hver WordPress installasjon med det frie dashicons-ikonet skriftsett. Disse ikonene brukes i WordPress admin-verktøylinjen i administrasjonsområdet.

Noen andre populære ikonfonter er:

• Font Awesome
• Genericons
• IcoMoon
• Linearicons

For denne tutorials skyld skal vi bruke FontAwesome. Det er den mest populære, gratis og åpen kildekode-ikon font tilgjengelig, og vi bruker det også på vår OptinMonster byggherre.

Vi skal dekke to måter å legge til ikonfonter i WordPress. Den første metoden vil bruke et plugin, og den andre vil vise deg hvordan du legger til et ikon skrift uten et plugin.

Legge til ikonfonter i WordPress ved hjelp av plugins

FontAwesome og andre gratis ikonfonter støttes av mange WordPress-plugins. Ved hjelp av et plugin kan du enkelt legge til et ikonfonter til et hvilket som helst WordPress-tema uten å endre noen kode.

Første du trenger å gjøre er å installere og aktivere det beste plugin-programmet. Ved aktivering kan du besøke Innstillinger »Bedre Font Awesome side for å konfigurere plugininnstillingene. Pluggen fungerer imidlertid ut av esken, så de fleste brukere trenger ikke å endre noe der.

Bedre Font Awesome lar deg legge til fontikoner ved hjelp av kortnumre som dette:

[ikonnavn = "rakett"]
[ikonnavn = "sky"]
[ikonnavn = "hodetelefoner"]

Du kan også legge til ikonene i postredigeringsprogrammet ved å velge et ikon. Fortsett å opprette et nytt innlegg eller redigere en eksisterende, og du vil se Sett inn ikon-knappen.

Hvis du klikker på det, kommer det opp en popup der du kan finne et ikon og sette det inn.

Du vil legge merke til at plugin vil legge til en kodenavn i din postredigerer som vil se slik ut:

[ikonnavn = "universitet"]

Hvis du vil tilpasse ikonet ytterligere, kan du legge til din egen CSS-klasse for å legge til tilpassede stiler.

[ikonnavn = "universitet"]

Nå kan du stile ikonet ved å bruke CSS i temaet eller temaet ditt stilark.

 .fa-universityicon font-size: 100px; color: # FF6600;  

Det er så enkelt.

La oss nå se på hvordan du kan legge til ikonfonter i WordPress uten et plugin.

Legge til ikonfonter i WordPress manuelt

Som vi tidligere nevnte, er ikonfonter bare skrifter og kan legges til nettstedet ditt slik at du vil legge til noen egendefinerte skrifter.

Noen ikonfonter som Font Awesome, er tilgjengelige fra CDN-servere over nettet, og kan kobles direkte fra WordPress-temaet ditt direkte.

Du kan også laste opp hele skriftkatalogen til en mappe i WordPress-temaet og deretter bruke disse skriftene i stilarket.

Siden vi bruker Font Awesome for denne opplæringen, viser vi deg hvordan du kan legge til den ved hjelp av begge metodene.

Metode 1:

Dette er den enkleste. Alt du trenger å gjøre er å legge til denne enkle koden i temaet ditt header.php filen rett før stikkord.

Denne metoden er enklest, men det kan føre til konflikter med andre plugins.

En bedre tilnærming til å laste stilark eller skript i WordPress, er å ordne dem riktig.

I stedet for å koble til stilarket fra temaets overskriftsmal, kan du legge til følgende kode i temaets funksjoner.php-fil eller i et nettstedspesifikt plugin.

 funksjon wpb_load_fa () wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Metode 2:

Den andre metoden er ikke den enkleste, men det vil tillate deg å ha skrifter inni temaet ditt.

Bare last ned ikonet skrifter og pakke ut pakken. Nå må du koble til nettstedet ditt ved hjelp av en FTP-klient og gå til WordPress-temaets katalog.

Du må opprette en ny mappe der og gi det navnet på skrifter. Deretter må du laste opp innholdet i ikonfonter-mappen til skrifttypekatalogen på serveren din.

Nå er du klar til å laste ikonfonter i WordPress-temaet ditt. Bare legg til denne koden i temaets funksjoner.php-fil eller i et nettstedspesifikt plugin.

 funksjon wpb_load_fa () wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css');  add_action ('wp_enqueue_scripts', 'wpb_load_fa'); 

Du har lastet inn Font Awesome i WordPress-temaet ditt.

Nå kommer den delen hvor du vil legge til faktiske ikoner i WordPress-temaet, innleggene eller sidene.

Manuell Viser ikonfonter i WordPress

Gå til Font Awesomes nettsted for å se hele listen over ikoner som er tilgjengelige. Klikk på et hvilket som helst ikon du vil bruke, og du vil kunne se ikonet.

Kopier ikonnavnet og bruk det slik i WordPress.

Du kan stile dette ikonet i temaets stilark slik:

 .fa-optin-monster font-size: 50px; color: # FF6600;  

Du kan også kombinere ulike ikoner sammen og stil dem på en gang. For eksempel, la oss si at du vil vise en liste over lenker med ikoner ved siden av dem. Du kan pakke dem inn under et element med en bestemt klasse.

  Hjem Bibliotek applikasjoner innstillinger  

Nå kan du stile dem i temaets stilark slik:

 .ikoner-gruppe-element i color: # 333; skriftstørrelse: 50px;  .icons-group-item i: hover color: # FF6600 

Vi håper denne artikkelen hjalp deg med å lære hvordan du enkelt legger til ikonfonter i WordPress-temaet. Du vil kanskje også se på vår veiledning om hvordan du legger til bildeikoner med navigasjonsmenyer i WordPress.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.