[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" ефекта и другите и шукарийки, ако имаш желание.
Надявам се, че съм бил полезен и съжалявам, ако съм пропуснал или объркал нещо.
Поздрави.
Виж дали си задал charset=utf-8 на html-a. А и винаги можеш да сложиш картинка; аз явно така съм направил, когато съм писал това домашно.
Тук намерих някакво инфо за поддръжката на този символ, макар че не изглежда особено нова информацията.
UTF-8 е енкодинга. И аз си мислех за картинка, ама ми се иска да го направя както е на сайта, въпреки че там вероятно е със CSS. Нищо, след лекцията довечера надявам се ще знам как :)
Принципно тази иконка е от шрифта Glyphicon-Halflings, а кодът ѝ е \e003. Aко искаш да я ползваш, трябва да добавиш този фонт.
За мен 3000 пъти по-лесният начин е да я изрежеш директно от сайта със Snipping Tool (примерно), и след това да я наместиш в image таг: ) Това, че фонът на картинката е син, няма никакъв проблем, защото всичко около нея е същият син цвят така и така : D
Варианта с картинката е по-лесен, да, но не ме кефи че е растерна и дребна картинка. Исках да пробвам как се прави като хората с шрифт, така че да може да се скалира понеже е векторна графика :)
Иначе лупичката я има в един куп шрифтове, вкл. Segoe UI, който е системен за Windows, ама явно е друга врътката. Ще видим довечера.
Благодаря и на двама ви :)
Много ти благодаря, колега, доста изчерпателен отговор :)