Czcionki ikon są niesamowite dla Twojej witryny Oto dlaczego

Słyszałeś o ikonach i prawie na pewno słyszałeś o czcionkach, ale co to jest Ikona czcionki? Dzisiaj pokażę ci, jakie są czcionki ikon i jak możesz ich użyć, aby ożywić swoją witrynę. Zacznijmy.

Jakie są czcionki ikon?

Czcionki ikon są dokładnie takie same jak “regularny” czcionki - określają wygląd tekstu. Duża różnica polega na tym, że czcionki nie zawierają liter i cyfr, ale symbole i ikony. Możesz być tym zdezorientowany, ponieważ dobro jest czcionką, jeśli nie możesz pisać listów do mamy!

Czcionki ikon służą przede wszystkim do stylizacji stron internetowych. Ponieważ są oparte na wektorze, można zmieniać ich rozmiar, przesuwać, stylizować i zmieniać za pomocą CSS 5 Baby Steps to Learning CSS i zostać kick-ass CSS Sorcerer 5 Baby Steps to Learning CSS i zostać kick-ass CSS Sorcerer CSS to jedna najważniejsza zmiana, którą zaobserwowaliśmy w ostatnich dziesięcioleciach, utorowała drogę do oddzielenia stylu i treści. W nowoczesny sposób XHTML definiuje strukturę semantyczną…. Zapewnia to ogromną przewagę nad tradycyjnymi metodami projektowania, takimi jak obrazy. Wygląd i działanie dużej liczby ikon można zmienić za pomocą zaledwie kilku wierszy kodu. Nie musisz edytować żadnych zdjęć, otwierać Photoshopa ani przesyłać nowych plików - po prostu piszesz kod.

Pierwsze kroki

W tych przykładach użyję Font Awesome, ale teorię można zastosować do wielu innych pakietów czcionek.

Oto kod startowy HTML:

    MUO Icon Fonts html font-family: helvetica, arial;      

Jest to minimalna ilość HTML wymagana do utworzenia strony internetowej. Nie będę wyjaśniać większości z nich, ponieważ omówiliśmy to w naszym przewodniku na temat tworzenia witryny internetowej.

Najważniejsza linia to:

Spowoduje to załadowanie arkusza stylów Font Awesome z jego CDN. Bez tego wiersza twoja strona nie wiedziałaby, czym jest Font Awesome, więc jest to bardzo ważne. Ten arkusz stylów obsługuje całą ciężką pracę związaną z osadzaniem czcionek internetowych i ogólnie znacznie ułatwia ci pracę.

Czcionki Niesamowite ikony są definiowane przez dodane do nich klasy CSS ja tagi. Zostały one wybrane, ponieważ nie mają dołączonej żadnej przeglądarki lub domyślnie zdefiniowanego stylu, więc Twoje ikony nie zostaną pomieszane. Możesz też dodać klasy do przęsło tagi, ale to zaśmieca twój HTML.

Oto podstawowe użycie. Umieść to w swoim ciało tagi:

 Moja pierwsza ikona

Oto jak to wygląda:

Jak łatwo to było? Rozbijmy to. Do działania Font Awesome potrzebne są dwie klasy. Pierwszy nazywa się fa, co oznacza Font Awesome. Jest to potrzebne do każdej ikony, niezależnie od tego, której używasz. Druga klasa określa konkretną ikonę, której chcesz użyć - może to być cokolwiek, samolot, osoba lub karta kredytowa. Jest to również poprzedzone znakiem fa, a ponieważ jest to ikona koła zębatego, jej nazwa to fa-cog. Możesz wyświetlić listę wszystkich ikon w Font Awesome na ich stronie internetowej.

Spróbuj zmienić ikonę z koła zębatego na inny.

Będzie głębiej

Kiedy poznasz podstawy, czas na zaawansowane sztuczki.

Jeśli nie chcesz pisać własnego CSS, możesz użyć stylów wbudowanych w Font Awesome. Istnieje wiele klas, których możesz użyć, aby powiększyć ikony:

Inną przydatną klasą do użycia jest fa-spin. To sprawi, że ikony będą się obracać, a w połączeniu z poprzednimi klasami rozmiarów, możesz uzyskać fajne efekty. Oto kod:

Oto wynik:

Ikony można łatwo obracać - użyj fa-rotate klasa:

Liczba na końcu określa stopnie obrotu ikony, ale nie daj się zwieść. Jesteś ograniczony do 90, 180, lub 270.

Ostatnią sztuczką, którą możesz zrobić, jest układanie w stosy. The fa-stack klasa pozwala łączyć ze sobą dwie lub więcej ikon. Oto kod:

Oto jak to wygląda:

Kiedy zaczniesz łączyć wszystkie te różne klasy, możliwości są naprawdę nieograniczone.

niestandardowe CSS

Ponieważ są to czcionki ikon właśnie czcionek, możesz nadać im styl CSS, tak jak każdy inny element. Korzystanie z małego CSS3 może przejść długą drogę:

Oto kod HTML tej ikony:

Oto CSS:

@ keyframes move from margin-left: 0;  do margin-left: 400px;  .bike animation-name: move; czas trwania animacji: 4s; 

Ten CSS jest dość prosty, ale ma duży wpływ. To nie jest samouczek CSS, więc możesz chcieć nauczyć się CSS Kolejne kroki na drodze do zostania mistrzem Jedi CSS Następne kroki na drodze do zostania mistrzem Jedi CSS CSS jest absolutnie jedną z najważniejszych technologii w okolicy w Internecie dzisiaj i chociaż większość ludzi przyznaje się do znajomości małego HTML, generalnie nie mamy pojęcia o CSS. Ostatnim razem przedstawiłem ci ... jeśli chcesz dowiedzieć się więcej o wewnętrznych działaniach.

Możesz zrobić specjalne rzeczy, jeśli naprawdę chcesz:

Zacina się to trochę, aby zmniejszyć rozmiar pliku w Internecie. Oto HTML:

Oto CSS:

@keyframes fade from opacity: 0;  do krycie: 1;  .person opacity: 0; nazwa-animacji: zanikanie;  # p1 kolor: czerwony; czas trwania animacji: 2s;  # p2 kolor: pomarańczowy; czas trwania animacji: 4s;  # p3 kolor: zielony; czas trwania animacji: 6s;  # p4 czas trwania animacji: 8s; 

Podobnie jak w poprzednim przykładzie, wykorzystuje on animacje CSS3. Animacja o nazwie zgasnąć jest tworzony, a ikona każdej osoby implementuje tę animację w różnym czasie. Dzięki tym ikonom i CSS3 istnieje duży potencjał do zwariowania.

To wszystko na dzisiaj. Powinieneś być teraz w stanie używać czcionek ikon do ożywienia swojej witryny! Jeśli nie jesteś jeszcze tak pewien swoich umiejętności, sprawdź te witryny z szablonami CSS. 11 Witryny z szablonami CSS: Don't Start From Scratch! 11 Witryny z szablonami CSS: Nie zaczynaj od zera! Istnieją tysiące darmowych szablonów CSS dostępnych online, wszystkie uwzględniające trendy i technologie nowoczesnego wzornictwa. Możesz użyć ich w oryginalnej formie lub dostosować do własnych wymagań. lub te kanały YouTube na początek Chcesz nauczyć się projektowania stron internetowych? 7 kanałów YouTube na początek Chcesz nauczyć się projektowania stron internetowych? 7 kanałów YouTube na początek YouTube oferuje tysiące filmów i kanałów dla początkujących projektantów stron internetowych. Oto niektóre z najlepszych na początek. z projektowaniem stron internetowych.

Czy nauczyłeś się dzisiaj czegoś nowego? Jaka jest twoja ulubiona ikona czcionki? Daj nam znać w komentarzach poniżej!