Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Újdonság – Ikonok a Google Fontsban

2021. március 08. | Bognár Péter

# # # # #

A Google Fonts minden webdesigner egyik legjobb barátja: sok mindent el lehet mondani a Google-ról, de az biztos, hogy minden Nagy Testvér-aspirációjuk mellett befolyásukat és nyomatékukat sokszor használják webstandarddá váló ingyenes erőforrások kialakítására. Ezek egyike lett a mára Google Fontsszá vált Web Fonts és hatalmas, mindenhol használt betűkészlet-könyvtára. (A magyar weben alkotók számára persze némiképp csökkenti az értékét, hogy a fellelhető több, mint 1000 betűkészletnek csak egy része árvíztűrő, azaz nem mind tartalmazzák az összes magyar betűt.)

Bár megszokhattuk, hogy a nemrég a 10. születésnapját ünneplő szolgáltatás folyamatosan bővül, a múlt héten komoly fejlesztést jelentettek be: a betűkészletek mellett megjelent a nyílt forráskódú ikonok támogatása is. Bár a Google szerint a jövőben várható lesz több ikonkészlet megjelenése is a gyűjteményben, első lépésként a teljes Material ikonkészlet lett elérhető, ami 2000 ikont jelent, amiket ötféle stílusban érhetünk el.

Forrás: Google Fonts

A kategóriák szerint csoportosított ikonok mindegyikét választhatjuk kitöltött, körvonal, kéttónusú, éles vagy lekerekített változatban is. Az egyes ikonok letölthetőek .svg és .png formátumban is, választható méretben és pixelsűrűségben, valamint fekete és fehér alapszínben.

Ugyanakkor, ha megelégszünk a sima fekete ikonokkal, a fontokhoz hasonlóan könnyen le is hívhatjuk őket a Google szerveréről. A megszokott módon a <head> szekcióba be kell másolni az alábbi kis kódrészletet:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Ha ez megvan, egy .material-icons osztályt hivatkozva illeszthetjük be az oldalba a kívánt ikont, mégpedig a nevüket (ún. ligatúra) meghivatkozva, pl.:

<span class="material-icons">face</span>

Ha nem bízunk benne, hogy az összes böngésző támogatja a ligatúrák használatát, az ikonok kódját is beilleszthetjük &#x előtaggal és pontosvesszővel lezárva.

Persze a másképpen, pl. self-hostinggal is használhatjuk őket, a Google elég alapos útmutatót tett elérhetővé a tennivalókról.

A nagy váltás tiszteletére a Google Fonts új, ünnepi ruhába is bújt. Az egyik újdonság, hogy megjelent egy kapcsoló az oldal tetején, amivel bekapcsolhatjuk a sötét módot. Ez egyfelől így megfelel a modern felhasználók ízlésének, energiatakarékosabb is, ráadásul így sötét alapon is megnézhetjük magunknak a kiválasztandó fontokat, ami néha nagyon jól tud jönni.

Forrás: Google Fonts

A másik, hogy a korábbi, sima F helyett a Google Fonts végre egy gondosan megtervezett, igazi logót is kapott:

Forrás: Google Fonts

Íme, ő az. Remélem tetszik, a jövőben sokat láthatod majd.

Iratkozz fel YouTube csatornákra!

blog

Tanulás Designer Karrier Kérdezz-Felelek

Designer Karrier Kérdezz-Felelek

2022. január 25.

A múlt hét végén megtartott Kreatív Karriernavigátor nap (2022.01.21.) után nagyon sok kérdés jött hozzánk, ezekre tegnap egy rögtönzött FB Live-ban válaszoltam, illetve fel tudtatok tenni egyéb kapcsolódó kérdéseket is. Kiből lehet designer? Én azt gondolom, hogy nem kell hozzá extra képesség. Nyilván aki tudja magáról, hogy általában nincs szépérzéke, nehezebben fog boldogulni, de már […]

Tovább a cikkre
Secured By miniOrange