TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur använder jag fantastiska ikoner för teckensnitt i Weebly?

1

Fantastiska teckensnittsikoner är skalbara vektorikoner som ursprungligen utvecklades för att användas med Bootstrap -ramverk och senare gjordes tillgängliga för andra. Som namnet indikerar Font Awesome -ikoner är helt enkelt fantastiska att använda var som helst på din webbplats för flera ändamål. Ikonerna är skalbara vilket innebär att du kan använda samma ikon i olika storlekar utan att förlora skärmens kvalitet. För närvarande erbjuder Weebly alla standardalternativ för att lägga till ikonsnitt för dina webbplatselement. I den här artikeln kommer vi att diskutera varför och hur man använder fantastiska teckensnittsikoner på Weebly -webbplatsen.

Varför ska du överväga att använda teckensnittsikoner?

Det finns flera anledningar till varför du bör överväga att använda teckensnittsikoner:

  • Ikoner är fria att använda för personligt och kommersiellt bruk.
  • Du behöver inte bild och JavaScript för att skapa en ikon som förbättrar webbplatsens laddningstid.
  • Utseendet på ikonen kan anpassas helt med CSS.
  • Olika storlekar av ikoner kan användas med perfekt upplösning.
  • Mycket attraktiv på enheter med näthinneskärm.

Du kanske ser användning av teckensnittsikoner på andra plattformar som WordPress och undrar hur detta kan göras på Weebly -webbplatsen.

Hur använder jag fantastiska ikoner för teckensnitt i Weebly?

Även om det finns många sätt att använda fantastiska teckensnittsikoner kommer vi att förklara två enkla metoder:

  • Använda Bootstrap CDN från alla CDN -tjänster som MaxCDN
  • Hosting font awesome ikoner på din egen webbplats

Använda Bootstrap CDN

Detta är det enklaste, tillförlitliga och enkla sättet att använda fantastiska teckensnittsikoner på din webbplats utan problem. Du behöver bara länka följande formatmall under rubriken på din sida eller webbplats.

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

Vi rekommenderar att du länkar formatmallen i rubriksektionen på någon av dina sidor under fliken "Sidor" innan du distribuerar den på live -webbplatsen. Möjligen kan du skapa en testsida dold för sökmotorer eller skapa en testsajt och länka formatmallen i rubriksektionen under "Inställningar" -fliken. Observera att fantastiska teckensnittsikoner fungerar på en gratis Weebly -webbplats och det finns inget behov av premiumplaner för detta ändamål.

Hosting på din webbplats

Istället för att använda Bootstrap CDN CSS kan du också ladda ner hela teckensnittsfilerna och CSS från font awesome webbplatsens hemsida på Github. Ladda upp hela mapparna på din Weebly -webbplats genom att redigera HTML/CSS -källan. Se till att ladda upp alla typer av teckensnitt och CSS -filer enligt bilden nedan:

Hur använder jag fantastiska ikoner för teckensnitt i Weebly?

Ladda upp fantastiska teckensnittsfiler i Weebly

Länka CSS -filen till rubriksektionen på önskad sida eller på webbplatsnivå.

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

Du kan använda antingen .css -fil eller .min.css -fil. Den minifierade versionen rekommenderas på live -webbplats eftersom den förbättrar webbplatsens laddningstid.

Användningsexempel på teckensnittsikoner

När du bestämt dig för om du ska ladda upp formatmallar och teckensnitt eller använda CDN CSS är nästa steg att använda det på din sida med hjälp av elementet "Bädda in kod".

Låt oss ta ett exempel på att lägga till en kugghjulsikon på din sida, formatet för att lägga till en fantastisk teckensnittsikon är enkelt som nedan:

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

Syntaxen innehåller tre delar:

  • … – varje ikon ska användas i taggen.
  • fa – font fantastiskt CSS -klassprefix.
  • fa-phone-square-verkligt ikonnamn.

Utmatningen av ovanstående kod klistrad inuti elementet "Bädda in kod" kommer att se ut nedan:

Hur använder jag fantastiska ikoner för teckensnitt i Weebly?

Font Awesome Icon Exempel i Weebly

Öka ikonens storlek

Det finns fem CSS -klasser för att öka ikonens storlek enligt nedan:

<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

Obegränsade anpassningar

När du väl fått hjälp med att använda teckensnittsikonerna finns det många användbara sätt att använda dem på en webbplats. Du kan till exempel lägga till en lista enligt nedan:

<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>

Listan kommer att gilla nedan:

Hur använder jag fantastiska ikoner för teckensnitt i Weebly?

Teckensnittsikonlista

Du kan se exemplen för att kontrollera hur enkelt det är att lägga till många funktioner på din webbplats med teckensnittsikoner. Se även fuskbladet för att snabbt få ikonnamnen. Du kan också använda Unicode istället för ikonnamn. Till exempel, i exemplet ovan på listikonen istället för att använda ikonnamnet fa-check-square kan du använda dess motsvarande Unicode-värde .

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer