[Homework] Tables - 4. Website Header - лупичката
Здравейте колеги,
Някой успя ли да се пребoри с лупичката в хедъра? Ясно е че е символ с код 🔍 обаче Chrome ми го показва като правоъгълниче каквото и да правя с шрифтовете. Идеи?
Best Answer
Здравей колега,
В сайта на SoftUni е използван "Font Awesome Icons", което е иконо-шрифт (не звучи много благозвучно на български), който можеш да си изтеглиш от тук, ако желаеш, но не е задължително, за да го използваш. Просто е нужно да:
- Копираш следното в <head>, за да го импортираш. Има и други начини - кой по-правилен, кой по-грешен ще разбереш по-напред, като за вариантите можеш да прочетеш повечко тук.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> -
Харесваш си икона, която е подходяща за конкретния случай от тук или в твоя случай тази.
-
Както можеш да намериш в линка на конкретната икона, постяваш реда по-долу на мястото, на което желаеш.
<i class="fa fa-search"></i> -
Дооформяш си я както искаш да изглежда, посредством нужните стилове. За големина използваш "font-size" (ако не се лъжа е 20px в конкретния случай) и цвета с "color" (който е бял - #fff). Иначе казано все едно, че стилизираш текст. Можеш да я довършиш, като добавиш "hover" ефекта и другите и шукарийки, ако имаш желание.
Надявам се, че съм бил полезен и съжалявам, ако съм пропуснал или объркал нещо.
Поздрави.
Много ти благодаря, колега, доста изчерпателен отговор :)