Czcionki ikon są niesamowite dla Twojej witryny: oto dlaczego

Reklama

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 czcionki „zwykłe” - 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 się tym pogubić, bo co za dobra czcionka, jeśli nie możesz pisać listów do mamy!

Czcionki ikon służą przede wszystkim do stylizacji stron internetowych. Ponieważ są oparte na wektorach, można zmieniać ich rozmiar, przenosić, stylizować i zmieniać za pomocą CSS 5 kroków do nauki CSS i zostania czarodziejem CSS w stylu kick-assCSS jest najważniejszą zmianą, jakiej dokonały się strony internetowe w ostatnim dziesięcioleciu, i utorował drogę do oddzielenia stylu i treści. W nowoczesny sposób XHTML definiuje strukturę semantyczną ... Czytaj więcej . 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

Będę używać Czcionka Awesome dla tych przykładów, ale teorię można zastosować do wielu innych pakietów czcionek.

Oto początkowy kod HTML:

Jest to minimalna ilość HTML wymagana do utworzenia strony internetowej. Nie będę wyjaśniać większości, ponieważ omówiliśmy to w naszym przewodniku na temat jak zrobić stronę internetową.

Najważniejsza linia to:

Spowoduje to załadowanie arkusza stylów Awesome czcionki z jego CDN. Bez tego wiersza Twoja witryna 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 Zakres 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 dla 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ć wszystko, 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 ikony 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, 180lub 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 Czcionki, możesz stylizować je za pomocą 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ć uczyć się CSS 10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minutChcesz wiedzieć więcej o korzystaniu z CSS? Wypróbuj te podstawowe przykłady kodu CSS na początek, a następnie zastosuj je do własnych stron internetowych. Czytaj więcej 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ć ikon czcionek, aby ożywić swoją stronę! Jeśli nie jesteś jeszcze tak pewien swoich umiejętności, sprawdź je Witryny z szablonami CSS 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ń. Czytaj więcej lub te Kanały YouTube na początek Chcesz nauczyć się projektowania stron internetowych? 7 kanałów YouTube na dobry początekYouTube ma tysiące filmów i kanałów dla początkujących projektantów stron internetowych. Oto niektóre z najlepszych na początek. Czytaj więcej z projektowaniem stron internetowych.

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