Hogyan adhatunk fantasztikus ikonokat a gombjaihoz

A Font Awesome egy kényelmes könyvtár az ikonokhoz. Ezek az ikonok lehetnek .svgfájlformátumban tárolt vektorgrafikák vagy webes betűtípusok.

Ezeket az ikonokat ugyanúgy kezeljük, mint a betűtípusokat. Megadhatja méretüket pixelek használatával, és ők vállalják a HTML HTML-elemeik betűméretét.

Alapvető használat

A Félelmetes betűtípus alkalmazásba vagy oldalba való felvételéhez egyszerűen adja hozzá a következő kódot a HTML tetején lévő elemhez:

Az ielemet eredetileg más elemek dőlt betűvé tételére használták, de ma már gyakran használják az ikonokhoz. Hozzáadhatja a Font Awesome osztályokat az ielemhez, hogy ikonokká váljon, például:

Vegye figyelembe, hogy az spanelem ikonokkal is használható.

Így adhat hozzá egy ikont:

Ez egy egyszerű remek ikont eredményez:

És az alábbiak szerint illesztené be ezt az ikont egy gombra:

 Like 

Figyelje meg, hogy az ikon használatának két része van, a stílus előtag és az ikon neve . A fenti példában, a stílus előtag és az ikon neve van fas, és fa-thumbs-uprendre.

A Font Awesome a következő stílus előtagokat kínálja:

Stílus Stílus előtag Terv típusa
Szilárd fas Ingyenes
Szabályos far Pro
Könnyű fal Pro
Duotone fad Pro
Márkák fab Ingyenes

A márkaikonokat gyakran maga a cég küldi be, és hasznosak olyan dolgok felépítéséhez, mint például a szociális hitelesítés vagy a fizetés gombjai. Ezek az ikonok közé tartozik a Twitter, a Facebook, a Spotify, az Apple és még az freeCodeCamp is:

Bár az ingyenes terv alapján csak szilárd és márka ikonokhoz férhet hozzá, stílusuk kialakításának még mindig sok módja van.

Stílus betűtípus Félelmetes ikonok

Egyszerű alkalmazásokhoz használhat belső stílusokat:

A méretezéshez használhatja a Font Awesome beépített kulcsszavait is:

Fontos megjegyezni, hogy az FA ikonok öröklik font-sizea szülőtárolót. Ez azt jelenti, hogy az ikonok bármilyen, a velük együtt használható szöveggel skálázódnak, ezáltal a tervezés következetes.

Tegyük fel például, hogy több gombot szeretne létrehozni. A gombok alapértelmezett mérete meglehetősen kicsi, ezért írjon néhány CSS-t a gombok méretének növeléséhez, a bennük lévő szöveggel és ikonokkal együtt:

 Like    Dislike    Share 
button { font-size: 1.5em; margin: 5px; }

Az ikon méretét közvetlenül is beállíthatja azáltal, hogy megcélozza magát az ikont és annak beállítását font-size.

Font Awesome, nos, fantasztikus! A legnépszerűbb ikon eszköztáraként könnyen felvehető és használható valamennyi projektjében. Most menj az ikonra az összes dologra.

Több információ

  • Font Awesome docs
  • Az összes elérhető Font Awesome ikon