TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka käyttää mahtavia fonttikuvakkeita Weeblyssä?

2

Fontin mahtavat kuvakkeet ovat skaalautuvia vektorikuvakkeita, jotka on alun perin kehitetty käytettäväksi Bootstrap -kehyksen kanssa ja jotka on myöhemmin julkaistu muille. Kuten nimi osoittaa, Font Awesome -kuvakkeet ovat yksinkertaisesti mahtavia käyttää missä tahansa sivustossasi useisiin tarkoituksiin. Kuvakkeet ovat skaalautuvia, joten voit käyttää samaa kuvaketta erikokoisina menettämättä näytön laatua. Tällä hetkellä Weebly tarjoaa oletusvaihtoehdon lisätä kuvakefontteja sivustosi elementteihin. Tässä artikkelissa keskustelemme miksi ja miten käyttää mahtavia kirjasinkuvakkeita Weebly -sivustossa.

Miksi kannattaa harkita fonttikuvakkeiden käyttöä?

On useita syitä, miksi sinun pitäisi harkita fonttikuvakkeiden käyttöä:

  • Kuvakkeet ovat vapaita henkilökohtaisiin ja kaupallisiin tarkoituksiin.
  • Et tarvitse kuvaa ja JavaScriptiä kuvakkeen luomiseen, mikä parantaa sivuston latausaikaa.
  • Kuvakkeen ulkoasua voidaan muokata täysin CSS: llä.
  • Erikokoisia kuvakkeita voidaan käyttää täydellä tarkkuudella.
  • Erittäin houkutteleva laitteissa, joissa on verkkokalvonäyttö.

Saatat nähdä fonttikuvakkeiden käytön muilla alustoilla, kuten WordPress, ja ihmetellä, miten tämä voidaan tehdä Weebly -sivustolla.

Kuinka käyttää mahtavia fonttikuvakkeita Weeblyssä?

Vaikka on olemassa monia tapoja käyttää mahtavia fontteja, selitämme kaksi yksinkertaista menetelmää:

  • Bootstrap CDN: n käyttäminen mistä tahansa CDN -palvelusta, kuten MaxCDN
  • Isännöi fontteja mahtavia kuvakkeita omalla sivustollasi

Bootstrap CDN: n käyttö

Tämä on yksinkertaisin, luotettavin ja helpoin tapa käyttää mahtavia kirjasinkuvakkeita sivustossasi ilman ongelmia. Sinun tarvitsee vain linkittää seuraava tyylitaulukko sivusi tai sivustosi otsikko -osioon.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Suosittelemme linkittämään tyylitaulukon minkä tahansa sivusi otsikko -osioon Sivut -välilehteen ennen sen käyttöönottoa live -sivustossa. Mahdollisesti voit luoda testisivun, joka on piilotettu hakukoneilta, tai luoda testisivuston ja linkittää tyylitaulukon otsikon alla olevaan otsikko -osioon. "Asetukset" -välilehti. Huomaa, että mahtavat kirjasinkuvakkeet toimivat ilmaisella Weebly -sivustolla, eikä tähän tarvita premium -suunnitelmia.

Hosting sivustossasi

Bootstrap CDN CSS: n käyttämisen sijaan voit myös ladata täydelliset kirjasintiedostot ja CSS: n font awesome -sivuston kotisivulta Githubista. Lataa Weebly -sivustosi kaikki kansiot muokkaamalla lähdekoodia HTML/CSS. Varmista, että lataat kaikenlaiset fontit ja CSS -tiedostot alla olevan kuvan mukaisesti:

Kuinka käyttää mahtavia fonttikuvakkeita Weeblyssä?

Lataa Font Awesome -tiedostot Weeblyyn

Linkitä CSS -tiedosto vaaditun sivun otsikko -osioon tai sivuston tasolla.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

Voit käyttää .css- tai .min.css -tiedostoa. Pienennettyä versiota suositellaan live -sivustossa, koska se parantaa sivuston latausaikaa.

Esimerkkejä fonttikuvakkeista

Kun olet päättänyt, haluatko ladata tyylitaulukot ja fontit vai käyttääkö CDN CSS: ää, seuraava askel on käyttää sitä sivulla käyttämällä Upota koodi -elementtiä.

Otetaan esimerkki rataskuvakkeen lisäämisestä sivullesi, mahtavan fontin kuvakkeen lisääminen on yksinkertaista, kuten alla:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

Syntaksi sisältää kolme osaa:

  • … – jokaista kuvaketta tulee käyttää tunnisteen sisällä .
  • fa – font mahtava CSS -luokan etuliite.
  • fa-phone-square-kuvakkeen todellinen nimi.

Upota koodi -elementtiin liitetyn yllä olevan koodin tulos on seuraavanlainen:

Kuinka käyttää mahtavia fonttikuvakkeita Weeblyssä?

Font Awesome Icon Esimerkki Weeblyssä

Kuvakkeen koon kasvattaminen

On olemassa viisi CSS -luokkaa, jotka lisäävät kuvakkeen kokoa seuraavasti:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33% <i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x <i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x <i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x <i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Rajoittamattomat mukautukset

Kun olet oppinut käyttämään kirjasinkuvakkeita, on monia hyödyllisiä tapoja käyttää niitä sivustolla. Voit esimerkiksi lisätä luettelon seuraavasti:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List item 1</li> <li><i class="fa-li fa fa-check-square"></i>List item 2</li> <li><i class="fa-li fa fa-check-square"></i>List item 3</li> <li><i class="fa-li fa fa-check-square"></i>List item 4</li> </ul>

Lista pitää seuraavasta:

Kuinka käyttää mahtavia fonttikuvakkeita Weeblyssä?

Fontin kuvakeluettelo

Voit siirtää esimerkkejä tarkistaa, kuinka helppoa lisätä monia ominaisuuksia sivustoltasi fontin kuvakkeet. Katso myös huijausarkki saadaksesi nopeasti kuvakkeiden nimet. Voit myös käyttää Unicodea kuvakkeen nimen sijasta. Esimerkiksi yllä olevassa luettelokuvakkeen esimerkissä voit käyttää kuvakkeen nimen fa-check-square käyttämistä vastaavaa Unicode-arvoa .

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja