Ikon betűtípusok félelmetes az Ön webhelyén: Így van

Hirdetés

Hallottál már az ikonokról, és szinte biztosan hallottál a betűkészletekről is, de mi az Ikon betűtípus? Ma megmutatom neked, milyen ikon betűtípusok vannak, és hogyan lehet azokat felhasználni webhelyének felélénkülésére. Lássunk neki.

Mik az ikon betűtípusok?

Az ikon betűtípusok pontosan megegyeznek a „rendes” betűtípusokkal - meghatározzák egy szöveg megjelenését és megjelenését. A nagy különbség az, hogy az ikon betűkészletek nem betűket és számokat tartalmaznak, hanem szimbólumokat és ikonokat. Lehet, hogy összezavarja, mert mi az a jó font, ha nem tud leveleket írni anyádnak!

Az ikon betűkészleteket elsősorban a webhelyek stílusához használják. Mivel vektor alapúak, átméretezhetők, áthelyezhetők, stílusosíthatók és megváltoztathatók a használatával CSS 5 csecsemő lépés a CSS elsajátításában és a Kick-Ass CSS varázslóvá válásbanA CSS az egyetlen legfontosabb változási weboldal, amelyet az elmúlt évtizedben láttak, és előkészítette az utat a stílus és a tartalom szétválasztása érdekében. Az XHTML modern módon határozza meg a szemantikai struktúrát ... Olvass tovább

. Ez hatalmas előnyt jelent a hagyományos tervezési módszerekkel, például a képekkel szemben. Számos ikon kinézete és megjelenése csak néhány sornyi kóddal megváltoztatható. Nem kell szerkesztenie a képeket, nem kell megnyitnia a Photoshop szoftvert, és nem kell feltöltenie az új fájlokat - csak írnia kell a kódot.

Elkezdeni

Én használom Fantasztikus betűtípus ezekre a példákra, de az elmélet alkalmazható sok más betűkészlet-csomagra is.

Íme a kezdő HTML:

Ez a weboldal elkészítéséhez szükséges minimális HTML mennyiség. Nem fogom elmagyarázni annak többségét, mivel ezt már a mi útmutatónkban ismertettük hogyan lehet weboldalt készíteni.

A legfontosabb sor a következő:

Ez betölti a Font félelmetes stíluslapot CDN. Ennek a sornak a hiányában a webhely nem fogja tudni, hogy mi a Fantasztikus betűtípus, tehát nagyon fontos. Ez a stíluslap kezeli a web betűtípusok beágyazásának minden nehéz munkáját, és általában sokkal könnyebbé teszi a dolgokat.

A félelmetes betűtípusokat a hozzáadott CSS osztályok határozzák meg én címkéket. Ezeket úgy választották meg, mert nincsenek csatolva böngésző vagy alapértelmezés szerint definiált stílus, így az ikonjai nem fogják összezavarodni. Alternatív megoldásként felveheti az osztályokat arasz címkék, de ez nem zavarja meg a HTML-t.

Itt van az alapvető használat. Tegye ezt bele a test címkék:

 Az első ikonom

Így néz ki ez:

Mennyire volt könnyű? Lebontjuk. A Font félelmetes működéséhez két osztály szükséges. Az elsőt hívják fa, amely a Font félelmetes. Ehhez bármilyen ikonra szükség van, függetlenül attól, hogy melyiket használja. A második osztály meghatározza az használni kívánt ikont - ez bármi lehet, repülőgép, személy vagy hitelkártya. Ezt is előtaggal kell ellátni fa, és mivel ez egy fogaskerék ikon, annak neve is fa-fogaskerék. Megtekintheti az összes listát ikonok a Félelmetes betűtípusban a saját honlapjukon.

Próbáljon meg változtatni az ikont a fogaskerékről másra.

Megy mélyebb

Miután megismerte az alapokat, itt az ideje néhány haladó trükkökhöz.

Ha nem akarja írni a saját CSS-jét, akkor használhatja a közvetlenül a Fantasztikus betűtípusba épített stílusokat. Számos osztály használható az ikonok nagyításához:

Egy másik hasznos osztály, amelyet használni lehet fa-spin. Ez arra készteti az ikonokat, hogy forogjanak, és ha az előző méretosztályokkal kombinálják, akkor néhány szép effektus érhető el. Íme a kód:

Íme az eredmény:

Az ikonok elforgatása egyszerű - használja a FA-forgatás osztály:

A végén lévő szám határozza meg az ikon forgási fokát, de ne szálljon el. Önre korlátozódik 90, 180vagy 270.

Az utolsó trükk, amit megtehetsz, a egymásra rakás. Az fa-stack osztály lehetővé teszi két vagy több ikon kombinálását. Íme a kód:

Így néz ki ez:

Ha elkezdi kombinálni ezeket a különféle osztályokat, a lehetőségek valóban végtelenek.

Egyéni CSS

Mivel az ikon betűtípusok éppen betűtípusok, úgy stílusolhatja őket a CSS-sel, mint bármely más elem. Egy kis CSS3 használata messze megy:

Íme az ikon HTML:

Itt van a CSS:

@ kulcskeretek mozognak {a {margin-left: 0; } to {margin-left: 400px; } } .bike {animációs név: mozgatni; animáció időtartama: 4 s; }

Ez a CSS meglehetősen alapvető, de nagy hatással van rá. Ez azonban nem egy CSS-oktatóprogram, ezért érdemes lehet tanulj CSS-t 10 egyszerű CSS-példa, amelyet 10 perc alatt megtanulhatSzeretne többet megtudni a CSS használatáról? Próbáld meg kezdetben ezeket az alapvető CSS-kód példákat, majd alkalmazzák azokat a saját weboldalaikra. Olvass tovább ha többet szeretne tudni a belső működésről.

Megtehet néhány különleges dolgot, ha igazán szeretne:

Ez kissé dadog az internet fájlméretének csökkentése érdekében. Íme a HTML:

Itt van a CSS:

A @ kulcskeretek elhalványulnak {a {átlátszatlanság: 0; } -ig (átlátszatlanság: 1; } } .person {átlátszatlanság: 0; animációs név: fade; } # p1 {szín: piros; animáció időtartama: 2 s; } # p2 {szín: narancssárga; animáció időtartama: 4 s; } # p3 {szín: zöld; animáció időtartama: 6 s; } # p4 {animációs idő: 8 s; }

Az előző példához hasonlóan ez CSS3 animációkat is használ. Egy animáció, az úgynevezett áttűnés jön létre, és minden egyes személy ikonja változó időzítéssel valósítja meg ezt az animációt. Nagyon sok lehetőség rejlik ezen ikonok és a CSS3 használatával.

Ez minden mára. Mostantól képes lesz használni az ikon betűkészleteket a webhely felélénkítésére! Ha még nem vagy ilyen biztos a készségeiben, akkor nézd meg ezeket CSS sablon webhelyek 11 CSS sablonhely: Ne kezdje meg a semmiből!Több ezer ingyenes CSS-sablon érhető el online, amelyek mindegyike modern tervezési trendeket és technológiákat ölel fel. Használhatja őket eredeti formájukban, vagy testreszabhatja őket, hogy azok sajátak legyenek. Olvass tovább , vagy ezek YouTube-csatornák az induláshoz Szeretne tanulni a webdizájnról? 7 YouTube-csatorna az induláshozA YouTube-on több ezer videó és csatorna található a webdesign kezdője számára. Itt az alábbiak közül néhányat tekintünk meg az induláshoz. Olvass tovább webdesignnal.

Megtanultál valami újat ma? Mi a kedvenc ikon betűtípusa? Tudassa velünk az alábbi megjegyzésekben!