Font fantastiske fargeikoner. Font Awesome og IcoMoon: arbeider med ikonfonter

med fa-stack-klassen, og vi har allerede satt inn de ønskede ikonene i den. Først kommer bunnen, så toppen. Klassen fa-stack-1x eller fa-stack-2x legges til selve ikonene, avhengig av hvilket ikon som skal være større i størrelse. Den grunnleggende strukturen til koden er vist nedenfor.

I denne artikkelen vil jeg fortelle deg så enkelt og tydelig som mulig hva Font Awesome-ikonfonten er, hvordan du installerer den, og forklare flere eksempler på bruk.

Hva er Font Awesome font?

Awesome-fonten er nødvendig for å bruke ikoner uten å laste opp noen bilder (ikonsamlinger osv.) til nettstedet. Denne fonten (i versjon 4.1) inkluderer 441 ikoner, som blir tilgjengelige når du bruker en bestemt ikonklasse på et element. Men mer om det senere. Nedenfor kan du se en liten del av ikoneksempler:

Fordeler med fonten
- Gratis
- Enkel tilgang via CSS
- 441 ikoner (i versjon 4.1)
- Fungerer i IE
- Skalerbarhet
- Vises perfekt i e-lesere og i-enheter!
– Mange designere har allerede satt pris på og bruker fonten!

Hvordan installerer jeg Font Awesome font (med ikoner)?

1. Last ned fonten fra nettstedet http://fontawesome.io/. Den veier litt, ca 400 KB.

2. Kopier de utpakkede filene til prosjektet ditt (for eksempel hvor er indeksfilen). Navnene på filene vil mest sannsynlig ikke samsvare med eksisterende, siden navnene deres er ganske spesifikke.

3. Koble til filer i hodet på prosjektet ditt. Jeg tilbyr to alternativer - hvis det er plassert høyere i katalogen og hvis det er i ett.

4. Bruk en font. Se eksempelet nedenfor:

Bildeikon
Sjekk ikon

Eksempler på Font Awesome-font

La oss si at vi jobber med noen handlinger i henhold til listen:

• Klar


• Klar


• Laster


• Forventning

Venteikoner:

Sitat:

Så synd det ikke er gitt
Det er på tide at vi forstår
Hvem kan vi finne?
Og med hvem å tape...
Roter ikonene:

normal
fa-rotere-90
fa-rotere-180
fa-rotere-270
fa-flip-horisontal
ikon-flip-vertikal

CDN Font Awesome er den enkleste måten å begynne å bruke Font Awesome på din side eller applikasjon, og med bare én kodelinje. Du trenger ikke å laste ned eller installere noe.

Vi lager hvert sett med ikoner individuelt for hvert nettsted, noe som lar deg endre ikoner raskt og uten unødvendig problemer. Ved å bruke denne e-postadressen kan vi også identifisere hvilket sett med ikoner som er ditt, noe som betyr at du kan administrere settene dine.

Ikoner for nettstedet. Fort.

Du trenger ikke å kaste bort tid på filer på serveren din. Du får alle 675 ikoner pluss stilsett - alle optimalisert for rask lasting.

Enkle oppdateringer

Siden hvert nettsted vil ha et unikt sett med ikoner, kan du enkelt oppdatere det uten endringer i koden. Fantastisk =).

Eller

Avansert tilpasning Enkel

Bruker CSS

1. Lim inn følgende kode i taggen inn i HTML-koden til nettstedet ditt.

   "path/to/font-awesome/css/font-awesome.min.css">

2. Se eksempler

Bruker Sass eller mindre

Bruk denne metoden til å tilpasse Font Awesome 4.7.0 ved å bruke LESS eller SASS.

1. Kopier hele font-awesome-mappen til prosjektmappen din.
2. I prosjektet ditt åpner du filene font-awesome/less/variables.less eller font-awesome/scss/_variables.scss og rediger @fa-font-path eller $fa-font-path henholdsvis for å peke på mappen med fonter.

   @fa-font-path : "../font" ;

   Banen til fontmappen må være relativ til den kompilerte css-mappen.

3. Kompiler LESS- eller SASS-filene dine ved hjelp av en kompilator. Alt skal fungere.
4. Sjekk ut eksemplene for å komme i gang med Font Awesome!

Eller

Avansert nivå Pro

1. Legg til denne linjen i programmets Gemfile:

   perle "font-awesome-less"

2. Neste kjøring:

   $bunt

3. Eller installer manuelt:

   $ gem installer font-awesome-less

Hvis du bruker Rails, lim inn koden nedenfor, for eksempel i filen application.less:

1. Legg til følgende linje i prosjektets Gemfile:

   perle "font-awesome-sass"

2. Neste kjøring:

   $bunt

3. Eller installer manuelt:

   $ gem install font-awesome-sass

Hvis du bruker Rails, lim inn koden nedenfor, for eksempel i filen application.scss:

@import "font-awesome-sprockets" ; @import "font-awesome" ;

Tilleggsinformasjon

Validatorer

For å gi de beste resultatene i eldre og feilaktige nettlesere, bruker Font Awesome CSS-hack i noen tilfeller for å omgå feil og feil i nettlesere. Naturligvis forårsaker disse hackene advarsler når koden sjekkes i validatorer. Font Awesome bruker også nye CSS-egenskaper i flere situasjoner som ennå ikke er fullstendig standardisert, men som kun brukes til progressiv forbedring.

I praksis er disse validatoradvarslene irrelevante, siden de fleste CSS fungerer uten hacks, og følgelig bidrar de ikke til områder der de ikke brukes. Det er faktisk derfor vi ignorerer disse advarslene.

Internet Explorer 8 og @font-face

IE8 har flere problemer med @font-face når den brukes sammen med:before pseudo-elementet. Font Awesome bruker nettopp en slik kombinasjon. Hvis siden er bufret eller lastet inn uten at musepekeren holder musepekeren over nettleservinduet (for eksempel når du klikker på "refresh"-knappen eller laster innhold gjennom en ramme), vil siden bli generert før fonten lastes. Holder du musen over siden (brødteksten) bør du vise noen ikoner, ved å holde musepekeren over resten av ikonene som ikke er lastet, vil de også gjenopplives. dette problemet.

Vil du gjøre nettstedet ditt enda mer attraktivt? Skriftikoner hjelper deg med å dekorere innleggene, sidene eller menyene dine. Og når det kommer til fontikoner, kan vi ikke unngå å huske Font Awesome.

Hvis du vil legge til en stor samling av Font Awesome-ikoner til WordPress-siden din, kan du lese videre for to raske og enkle måter å legge dem til i WordPress.

Hva er Font Awesome-ikoner og hvordan er de nyttige?

add_action("wp_enqueue_scripts", "enqueue_load_fa"); funksjon enqueue_load_fa() ( wp_enqueue_style("load-fa", "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); )

Setter inn Font Awesome-ikoner

Når du har lagt til koden i temaet ditt, er du klar til å begynne å bruke Font Awesome-ikoner overalt.

Du finner en komplett liste over ikoner på Font Awesome nettsted.

For eksempel, hvis du leter etter "Last ned"-ikonet, skriv ganske enkelt inn "last ned" i søket og velg fra de tilgjengelige alternativene:

Etter å ha valgt ikonet du liker, kan du se en skjerm med forskjellige størrelser av det ikonet. I midten av skjermen bør du legge merke til en liten kodeblokk:

Du må kopiere hele koden til det valgte ikonet. Deretter kan du lime inn denne koden hvor som helst i WordPress, uansett hvilken editor du bruker. Bare pass på at du limer den inn mens redigeringsprogrammet er byttet til "Tekst"-modus:

Du kan gå tilbake til den visuelle fanen etter at du er ferdig med å bygge inn koden. Etter å ha publisert et innlegg, vil du se ikonet ditt i frontend:

Hvordan øke størrelsen på et Font Awesome-ikon

Som du kan se i eksempelet ovenfor, er ikonene ganske små. Hvis du trenger å øke dem, må du legge til noen få linjer med kode. For for eksempel å doble størrelsen på ikonene dine, legger du til "fa-2x" til ikonklassen.

Her er for eksempel startkoden for ikonet:

Og her er koden med ikonet forstørret 2 ganger:

I det virkelige liv vil ikonet nå se slik ut:

Her er en liste over kodebiter du må legge til for å endre størrelsen:

• fa-lg – økning med 33 %
• fa-2x – øk 2 ganger
• fa-3x – øk 3 ganger
• fa-4x – …
• fa-5x – ... vel, du skjønner!

Du kan også gjøre andre kule ting som å bruke Font Awesome-ikonet som et punkt, legge til animasjoner og mer. På den offisielle Font Awesome-nettsiden kan du finne instruksjoner om hvordan du endrer fontikoner.

2. Hvordan legge til Font Awesome til WordPress ved hjelp av en plugin

Hvis du ikke liker den forrige metoden, kan du installere plugin-en. Det er mange forskjellige plugins der denne funksjonen er tilgjengelig, men en av de mest populære er Better Font Awesome:

Du kan prøve andre plugins, men vi tror denne er den beste av flere grunner:

• Den oppdateres jevnlig. Dette er viktig fordi flere populære Font Awesome-plugins ikke har blitt oppdatert på flere år.
• Importerer automatisk et nytt sett med Font Awesome-ikoner.
• Lar deg legge til ikoner via en kortkode eller den samme koden vi brukte.

For å komme i gang, installer og aktiver plugin.

Det vil legge til en ny menydel Innstillinger → Bedre skrifttype Awesome i konsollen din. Du trenger ikke konfigurere noe, bare følg instruksjonene som pluginet gir:

Legger til ikoner

For å legge til ikoner i innlegg, kan du bruke samme metode som vi viste deg i den manuelle versjonen eller bruke en kortkode. Fordelen med å bruke en kortkode er at du ikke trenger å endre "Tekst"-fanen i editoren.

Kortkodeformatet du trenger er:

Der NAME er navnet på ikonet på Font Awesome-nettstedet:

Du kan legge til denne kortkoden til Divi-modulen eller til din vanlige WordPress-tekstredigerer. Her er et eksempel der vi la til et ikon via kortkode til en tekstmodul mens vi brukte Divi Visual Builder:

Visual Builder viser det slik:

Du kan bruke den samme kortkoden i den vanlige WordPress-editoren.

Hvis du vil endre størrelsen på ikonet ditt ved hjelp av en kortkode, så legg til en klassekode med ikonstørrelsen:

Resultater

Det er alt! To forskjellige måter å legge til Font Awesome vektorikoner på WordPress-nettstedet ditt. Vi foretrekker den manuelle metoden fordi det tar mindre tid og du ikke trenger å bekymre deg for potensielt å bryte plugin-en senere.

Men hvis du ikke vil berøre temakoden, er det bedre å bruke Better Font Awesome-plugin.

Nå du! Bruker du Font Awesome?

I en av de tidligere artiklene skrev vi om bruken av ikonfonter som en av måtene å oppnå adaptive bilder på nettstedet. Her for denne artikkelen. Og i dag skal vi snakke om en av de mest populære ikonfontene - Font Awesome. I dag skal vi i praksis se hvordan du kobler Font Awesome på en nettside ved hjelp av WordPress-motoren uten å bruke en plugin og hvordan du bruker denne fonten.

Hva er Font Awesome og hva er fordelene?

Ikonfonten Font Awesome er en font laget ved hjelp av ikoner, men det er på ingen måte et sett med bilder. Hvorfor er denne forskjellen så viktig? Fordi Font Awesome:

• Vector betyr at den ser bra ut uansett hvilken størrelse den vises i.
• Tilpassbar – Du kan manipulere den som enhver annen font. Endre farger, legg til animasjoner og mer!
• Kompatibilitet på tvers av nettlesere – ikonfonten skal fungere i nesten alle nettlesere.

Font Awesome tilbyr for øyeblikket et sett med 1264 forskjellige og gratis ikoner som du kan legge til nesten hvor som helst på WordPress-siden din. Hvis dette antallet ikoner ikke er nok for deg, oppgrader til betalt Pro.

Hvordan legge til Font Awesome til WordPress manuelt (uten en plugin)

Det er ganske enkelt å legge til Font Awesome-fonten til WordPress-siden manuelt. Denne prosessen består av 2 deler: først må du inkludere stilfilen til denne fonten i delen , for det andre, i kildekoden (i malen eller i tekstredigeringsmodus i konsollen) bruk en bestemt klasse for ønsket ikon.

Trinn 1: Koble til Font Awesome-skriftstilfilen

Det første trinnet er å legge til Font Awesome CSS-stilene til det aktive temaets header.php-mal. Legg til koden for å koble CSS-stilfilen til seksjonen :

Denne koden vil inkludere Font Awesome-stilarkfilen fra Bootstrap-depotet via CDN. Du kan også laste ned stilfilen direkte fra den offisielle Font Awesome-nettsiden (https://fontawesome.com/) og inkludere den fra temaet ditt.

Et mer foretrukket alternativ for å koble til ikke bare stiler, men også skript, er å bruke en spesiell tilkoblingsfunksjon i functions.php-filen til det aktive temaet. I stedet for å redigere header.php-filen, legg til følgende kode i det aktive temaets functions.php-fil:

Funksjon load_font_awesome() ( wp_enqueue_style("font-awesome-style", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); ) add_action(" wp_enqueue_scripts", "load_font_awesome");

Bruke Font Awesome-ikoner

Når du har inkludert stilene du ønsker i temaet ditt, kan du begynne å bruke Font Awesome-ikoner nesten hvor som helst på nettstedet ditt.

For å finne en komplett liste over ikoner, gå til den offisielle Font Awesome-nettsiden i menydelen Ikoner og velg ønsket ikon. For eksempel, hvis du vil legge til et tommel opp-ikon, søk etter tommel opp-ikonet (https://fontawesome.com/icons/thumbs-up?style=regular).

Hvert ikon har sin egen side hvor du kan se det omtrentlige utseendet til ikonet i forskjellige størrelser, finne ut Unicode-koden, og du kan også laste ned ikonet i SVG-format. Av størst interesse for oss for øyeblikket er eksempelkoden for å sette inn et ikon. For eksempel, for et tommel opp-ikon, vil eksempelkoden være:

VIKTIG! Vær oppmerksom på at i vårt eksempel bruker vi fontversjon 4.7.0. For øyeblikket er den nyeste versjonen versjon 5.1.0 og den bruker et annet klasseformat. For eksempel er ikonet ovenfor koblet til i formatet .

Når du har valgt et ikon, kopierer du koden for å koble den til og limer den inn på ønsket sted. Dette kan være en hvilken som helst malfil i det aktive temaet. Eller du kan sette inn ikoner gjennom konsollen. Når du redigerer et innlegg/side i tekstmodus, legger du til ønsket klasse for i-taggen (eller for eksempel span-taggen).

Når du bruker forskjellige versjoner av Font Awesome-stilfilen, vil klasseformatsyntaksen være forskjellig:

Kort oppsummering

I dagens artikkel så vi på det praktiske ved å legge til Font Awesome-ikonfonten til WordPress-siden din. Hvis du har spørsmål om dette emnet, vennligst si dem i kommentarskjemaet nedenfor.

Skriv i kommentarfeltet din mening om bruk av Font Awesome, og del også inntrykkene dine hvis du bruker versjon 5.x.x av denne fonten.