Kuinka lisätä symbolifontteja WordPress-asetteluun helposti

Haluatko lisätä symbolifontteja WordPress-sivustoosi? Äskettäin yksi lukijamme kysyi, kuinka on helpoin tapa lisätä symbolifontteja WordPress-teemaasi.

Symbolifontteilla voit lisätä vektorisymboleja (kokoa voidaan muuttaa) hidastamatta sivustoasi. Ne ladataan Web-fontteina ja ne voidaan suunnitella CSS: llä.

Tässä artikkelissa näytämme sinulle askel askeleelta, kuinka voit lisätä symbolifontteja helposti WordPress-asetteluosi.

Mitä ovat symboliset fontit ja miksi minun pitäisi käyttää niitä?

Symbolifontit sisältävät symboleja tai piktogrammeja kirjainten ja numeroiden sijasta. Nämä kuvakkeet voidaan helposti lisätä sivuston sisältöön ja muuttaa niiden kokoa CSS: n avulla. Verrattuna kuvapohjaisiin symboleihin, fonttisymbolit ovat paljon nopeampia, mikä vaikuttaa WordPress-sivustosi kokonaisnopeuteen.

Symbolifontteja voidaan käyttää usein käytettyjen symbolien näyttämiseen. Voit käyttää niitä esimerkiksi ostoskorissasi, latauspainikkeissa, ominaisuuslaatikoissa, lahjakilpailuissa ja jopa WordPress-navigointivalikoissa.

On olemassa useita ilmaisia ​​ja avoimen lähdekoodin fontteja, joissa on satoja kauniita symboleja.

Itse asiassa jokaisessa WordPress-asennuksessa on ilmainen fontti Dashicon-kuvakkeelle. Näitä symboleja käytetään WordPress-hallintavalikossa ja muilla WordPress-hallinta-alueen alueilla.

Muita suosittuja symbolifontteja ovat:

• Fontti mahtava
• yleinen
• IcoMoon
• Lineaariset kuvakkeet
• Google-symbolit
• sisältöprojekti

Tässä opetusohjelmassa käytetään Font Awesome -sovellusta. Se on markkinoiden suosituin ilmainen ja avoimen lähdekoodin symbolifontti. Käytämme FontAwesomea WPBeginner-sivustolla, samoin kuin WordPress-laajennuksiamme, kuten OptinMonster, WPForms, RafflePress jne.

Tämä opas kattaa kolme tapaa lisätä symbolifontteja WordPressiin. Voit valita sinulle parhaiten sopivan ratkaisun.

Lisää symbolifontteja WordPressiin laajennuksia käyttämällä

Jos olet aloittelija ja yrität vain lisätä joitain symboleja viesteihisi tai sivuillesi, tämä menetelmä on sinulle. Sinun ei tarvitse muuttaa mitään tematiedostoja ja voida käyttää symbolifontteja missä tahansa sivustosi sivustossa.

Asenna ja aktivoi ensin Font Awesome WordPress -laajennus. Lisätietoja on vaiheittaisessa oppaassa WordPress-laajennuksen asentamiseen.

Kun laajennus on otettu käyttöön, Font Awesome mahdollistaa yhteensopivuuden teemaasi kanssa. Nyt voit muokata mitä tahansa WordPress-viestiä tai -sivua ja käyttää seuraavaa kuvakorttikoodia:

(kuvakkeen nimi = “raketti”)

Voit käyttää tätä lyhytkoodia muun tekstin kanssa tai vain erillisessä lyhytkoodilohkossa.

Lisättyäsi voit esikatsella viestiäsi tai sivusi nähdäksesi, miltä kuvake näyttää live-sivustolla. Näin se näytti testisivullamme.

Voit myös lisätä lyhyen koodin itse fonttisymboliin kappalelohkossa käyttämällä lohkoasetusta lisätäksesi symbolin kokoa.

Tekstin kasvaessa se voi tuntua oudolta tekstieditorissa. Tämä johtuu siitä, että lohkomeditorin kortin koodi ei muutu automaattisesti symbolifontiksi.

Sinun on napsautettava viestin tai sivun esikatselupainiketta nähdäksesi, miltä nykyinen kuvakoko näyttää.

Voit käyttää myös sarakkeiden symbolikortin koodia ja luoda toimintokenttiä seuraavasti:

2, Käytä symbolifontteja WordPress-sivusgeneraattorin kanssa

Suosituimmat WordPress-sivuston rakennuksen lisäosat tarjoavat sisäänrakennetun symbolityyppisen tuen. Tällä tavalla voit helposti käyttää symbolifontteja aloitussivuillasi ja muilla sivustosi alueilla.

Beaver-rakentaja

Beaver Builder on markkinoiden paras WordPress-laajennus sivujen rakentajille. Voit luoda mukautettuja WordPress-sivuasetteluja helposti kirjoittamatta koodia.

Beaver Builder sisältää kauniita käyttövalmiita symboleja ja moduuleja, joita voit vetää ja pudottaa viesteihisi ja sivuillesi.

Voit luoda symboliryhmiä, lisätä yhden symbolin ja siirtää ne hyvin sijoitetuille riveille ja sarakkeille. Voit myös valita omat värit, taustat, etäisyyden ja kehykset tarvitsematta kirjoittaa CSS: tä.

Beaver Builderin Themer-tuotteella voit luoda jopa täysin räätälöityjä WordPress-asetteluja kirjoittamatta mitään koodia.

Elementor Pro

Elementor on toinen suosittu laajennus WordPress-verkkosivustojen rakentajille. Se sisältää myös erilaisia ​​elementtejä, joita voit käyttää symbolifontteihin, mukaan lukien symbolielementti.

Voit vetää ja pudottaa kuvakkeen mihin tahansa ja käyttää sitä rivien, sarakkeiden ja taulukoiden avulla kauniiden sivujen luomiseen.

Muut suositut sivujen rakentajat, kuten Divi ja Visual Composer, tukevat myös symbolifontteja.

3, Lisää symbolifontit manuaalisesti koodilla WordPressiin

Kuten aiemmin mainittiin, symbolifontit ovat vain fontteja, ja niitä voidaan lisätä sivustoosi kuten mitä tahansa mukautettuja fontteja.

Jotkut symbolifontit, kuten B. Font Awesome, ovat saatavana CDN-palvelimilla Internetissä, ja ne voidaan yhdistää suoraan WordPress-teeman kautta.

Voit myös lähettää koko kirjasinkansion WordPress-teeman kansioon ja käyttää sitten näitä fontteja tyylitiedostossasi.

Koska käytämme Font Awesome -tapahtumaa tähän oppaaseen, osoitamme sinulle, kuinka se lisätään jollakin menetelmistä.

menetelmä 1:

Tämä manuaalinen menetelmä on suhteellisen yksinkertainen.

Käy ensin Font Awesome -sivustolla ja kirjoita sähköpostiosoitteesi saadaksesi upotettu koodi.

Tarkista nyt postilaatikossasi, että sinulla on Font Awesome -sähköposti upotuskoodillasi. Kopioi tämä koodi ja liitä se WordPress-teeman otsikko.php-tiedostoon juuri ennen päivää.

Upotuskoodisi koostuu yhdestä rivistä, joka etsii Font Awesome -hakemistosta suoraan CDN-palvelimiltasi. Se näyttää tältä:

Tämä menetelmä on yksinkertaisempi, mutta saattaa olla ristiriidassa muiden pluginien kanssa.

Parempi tapa olisi ladata JavaScript oikein WordPressiin sisäänrakennetun jonotusmekanismin avulla.

Sen sijaan, että linkitit tyylisivun teeman otsikkomalliin, voit liittää seuraavan koodin teeman features.php-tiedostoon tai sivustokohtaiseen laajennukseen.

 
 function wpb_load_fa() {
 
 wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );
 
 }
 
 add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
 
 

menetelmä 2:

Toinen menetelmä ei ole helpoin, mutta voit isännöidä fontteja käyttämällä omalla sivustollasi Font Awesome -kuvaketta.

Lataa ensin Font Awesome -sivusto ja lataa kirjasinpaketti tietokoneellesi.

Lataa vain symbolikirjaimet ja pakkaa paketti.

Nyt sinun on muodostettava yhteys WordPress-isäntään FTP-asiakasohjelmalla ja vaihdettava WordPress-teemahakemistoon.

Sinun on luotava uusi hakemisto sinne ja nimettävä se lähteeksi. Lataa sitten symbolitiedostokansion sisältö verkkopalvelimen fonttikansioon.

Voit nyt ladata symbolifontteja WordPress-asetteluosi. Lisää tämä koodi vain features.php-tiedostoon sivustokohtaiseen teemaan tai laajennukseen.

 
 function 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' );
 
 

Olet ladannut Font Awesome WordPress-teemaasi.

Nyt tulee osa, jossa lisäät todellisia symboleja WordPress-teemaan, viesteihin tai sivuille.

Symbolifontien manuaalinen näyttö WordPressissä

Vieraile Font Awesome -sivustolla nähdäksesi täydellisen luettelon käytettävissä olevista symboleista. Napsauta haluamaasi kuvaketta ja kuvakkeen nimi tulee näkyviin.

Kopioi symbolin nimi ja käytä sitä WordPressissä seuraavasti.

Voit suunnitella tämän symbolin artikkelisi tyylisivulle seuraavasti:

 .fa-arrow-alt-circle-up { 
 font-size:50px; 
 color:#FF6600; 
 }
 

Voit myös yhdistää erilaisia ​​symboleja ja suunnitella niitä samaan aikaan. Oletetaan, että haluat näyttää luettelon linkkien vieressä olevista kuvakkeista. Voit kääri ne yhden alle

Elementti tietyn luokan kanssa.

 

   Home
   Library
   Applications
   Settings
 
 

Nyt voit suunnitella sen artikkelillesi tyylisivulla seuraavasti:

 .icons-group-item i { 
 color: #333; 
 font-size: 50px; 
 } 
 .icons-group-item i:hover { 
 color: #FF6600
 } 
 

Toivomme, että tämä artikkeli on auttanut sinua oppimaan lisäämään symbolifontteja WordPress-teemaan helposti. Voit lukea myös opetusohjelman, jolla lisätään kuvakuvakkeita navigointivalikoilla WordPressiin.

Jos pidit tästä artikkelista, tilaa kanavamme YouTube katsoa WordPress-opetusvideoita. Löydät meidät myös osoitteesta Twitter ja Facebook.