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

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

2021. december 27.

2021 nagyon sűrű év volt. Nem csak azért, mert idén voltunk 10 évesek, hanem mert az év elején kívül-belül megújultunk, egy igazán naprakész és interaktív tanfolyam várja a tanulni vágyókat. A vírushelyzet okán hétköznapivá vált online kapcsolattartási eszközök beépültek a tanmenetbe, így a tanfolyami anyagot idén sok-sok Facebook és Zoom Live óra keretezte, amelyek kiegészítő […]

Tovább a cikkre
Secured By miniOrange