Skrifttype (Mere) Awesome - en ikonisk opfindelse

Uanset om du bygger et websted, en mobilapp eller endda en enkeltstående app, er der få ting, du aldrig kan undslippe. Korrekt brug af grafik og ikoner er et sådant grundlæggende behov. Fancy ikoner er lige så vigtige som justeringer og farvekombinationer. Det skyldes, at et enkelt ikon kan udtrykke, hvad hundrede ord kan sige!

Mens der er adskillige måder at tilføje ikoner til et websted på, er den mest populære måde at bruge Font Awesome. Når du har udført de krævede konfigurationer, er tilføjelse af et ikon så simpelt som dette:

 

Der er dog situationer, hvor det ikonsæt, der er leveret af Font Awesome, er utilstrækkeligt. For eksempel har jeg for nylig ønsket at bruge logoerne på Facebook, Twitter og Airbnb på et websted. Og det overraskede mig - Airbnb-ikonet var ikke inkluderet i Font Awesome. Faktisk havde samfundet anmodet om Airbnb-ikonet omkring 3 år tilbage. Alligevel findes ikonet stadig ikke i det officielle ikonsæt.

Hvis du ønsker et tilpasset ikon, der ikke er meget populært, er den mindst komplekse måde at tilføje det ved hjælp af et img-tag. Dette er for meget arbejde sammenlignet med at bruge Font Awesome. På den anden side kan Font Awesome-fyre praktisk talt ikke imødekomme alle ikonanmodninger.

Så jeg søgte efter en nem måde at få de ikoner, jeg havde brug for, uden at afhænge af en tredjepart. Heldigvis fandt jeg et værktøj kaldet Calligraphr. Jeg vil nu forklare, hvordan jeg brugte dette værktøj, nogle CSS-viden og få andre enkle tricks til at kunne gøre følgende i min kode:



Temmelig sej ikke? Lad os derefter oprette skrifttype mere fantastisk!

Oprettelse af en skrifttype

Den første milepæl på vores rejse er at oprette Font More Awesome-skrifttypen ved hjælp af instruktionerne på deres websted. Det første trin er at downloade skabelonen. Her er et eksempel:

Calligraphr-skabelon

Hvad vi nu skal gøre er at udfylde disse felter med vores ønskede ikoner. Du kan enten udskrive og tegne ikonerne for hånd eller bruge et værktøj som Adobe Photoshop eller GIMP til at bruge billeder, der er downloadet fra internettet.

Når du har udfyldt skabelonen, ser den således ud:

Den næste ting, du skal gøre, er ganske enkel. Upload bare den udfyldte skabelon til calligraphr-webstedet, og klik på knappen "build font" - og BOOM! Din brugerdefinerede skrifttype downloades. Lad os navngive det FontMoreAwesome.otf

Hvis du undrer dig over, hvilken magi der lige er sket, kaldes det billedvektorisering eller billedsporing. På grund af den underliggende sporingsalgoritme kan du muligvis bemærke små forskelle mellem det anvendte billede og det faktiske oprettede ikon. Men når billederne først er konverteret til en vektor, kan de skaleres op og ned uden at miste kvalitet.

Integrering med Font Awesome

Naturligvis kan du behandle den nye fontfil som et separat ikonsæt. Men ville det ikke være cool, hvis vi selv kunne udvide Font Awesome-skrifttypen? Lad os gøre det!

En ting, du skal forstå her, er, at vi vil arve CSS-reglerne, der er defineret af Font Awesome CSS-filen. F.eks. Vil det indeholde en post som følger:

.fa {
  display: inline-block;
  font: normal normal normal 14px / 1 FontAwesome;
  font-størrelse: arve;
  tekst gengivelse: auto;
  -webkit-font-udjævning: antialiated;
  -moz-osx-font-udjævning: gråtoner;
}

Det betyder, at når vi definerer et ikonelement som følger, vil det arve stilarter som visning, skriftstørrelse og tekst gengivelse fra ovenstående.

Lad os definere vores brugerdefinerede CSS-fil. Lad os navngive filen font-more-awesome.css

Den første post i denne fil skal være font-face-erklæringen. Dette kan gøres som følger. Ikke noget særligt. Bare nogle grundlæggende CSS.

@ font-face {
    font-family: 'FontMoreAwesome';
    src: url ('../ skrifttyper / FontMoreAwesome.otf');
    font-vægt: normal;
    font-stil: normal;
}

Derefter kan vi nemt definere de tilpassede ikoner, vi ønsker sådan:

.fa-troll: før {
    font-family: FontMoreAwesome;
    indhold: "A";
}

.fa-lol: før {
    font-family: FontMoreAwesome;
    indhold: "B";
}

.fa-like-a-boss: før {
    font-family: FontMoreAwesome;
    indhold: "C";
}

Bemærk her, at vi definerer ikonerne som pseudo-elementer ved hjælp af markøren før. På den måde kan vi injicere det indhold, vi ønsker, i det element, der bruger disse klasser.

I FontMoreAwesome-skrifttypen, som vi oprettede, er "A," "B" og "C" repræsenteret ved ikonerne for henholdsvis Troll, Lol og Like-a-boss. Dette er dog ikke den bedste måde at gøre det på.

Font Awesome bruger Unicode Private Use Area (PUA) for at sikre, at skærmlæsere ikke aflæser tilfældige tegn, der repræsenterer ikoner.

Men for vores eksempel holder vi os med de engelske alfabetets bogstaver for at holde historien enkel.

En anden ting at bemærke i ovenstående eksempel er, at vi tilsidesætter skrifttypefamilien, der er defineret af Font Awesome, mens vi injicerer tilpasset indhold.

Lad os bruge skrifttypen mere fantastisk

Det sidste trin er at indlæse denne CSS-fil i filen index.html, hvilket er ret let.

Nu kan du bruge disse ikoner som ethvert andet fa-ikon. F.eks. Vil følgende ikon være stort og spin.

Nød du denne historie? Så er der en lille ting, du kan gøre ...