[Homework] Tables - 4. Website Header - лупичката - Софтуерен университет

Във форума е въведено ограничение, което позволява на потребителите единствено да разглеждат публикуваните въпроси.

malkstor 348 Точки

[Homework] Tables - 4. Website Header - лупичката

Здравейте колеги,

Някой успя ли да се пребoри с лупичката в хедъра? Ясно е че е символ с код 🔍 обаче Chrome ми го показва като правоъгълниче каквото и да правя с шрифтовете. Идеи?

Тагове:

04/12/2015 13:58:32 Web Fundamentals - HTML5 04/12/2015 13:59:26

stanislawtonkow 19 Точки

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" ефекта и другите и шукарийки, ако имаш желание.

Надявам се, че съм бил полезен и съжалявам, ако съм пропуснал или объркал нещо.

Поздрави.

09/12/2015 05:53:30 09/12/2015 06:15:41

malkstor 348 Точки

Много ти благодаря, колега, доста изчерпателен отговор :)

09/12/2015 08:36:54

Filkolev 4482 Точки

Виж дали си задал charset=utf-8 на html-a. А и винаги можеш да сложиш картинка; аз явно така съм направил, когато съм писал това домашно.

Тук намерих някакво инфо за поддръжката на този символ, макар че не изглежда особено нова информацията.

04/12/2015 14:07:17

malkstor 348 Точки

UTF-8 е енкодинга. И аз си мислех за картинка, ама ми се иска да го направя както е на сайта, въпреки че там вероятно е със CSS. Нищо, след лекцията довечера надявам се ще знам как :)

04/12/2015 15:03:48

enevlogiev 1168 Точки

Принципно тази иконка е от шрифта Glyphicon-Halflings, а кодът ѝ е \e003. Aко искаш да я ползваш, трябва да добавиш този фонт.

За мен 3000 пъти по-лесният начин е да я изрежеш директно от сайта със Snipping Tool (примерно), и след това да я наместиш в image таг: ) Това, че фонът на картинката е син, няма никакъв проблем, защото всичко около нея е същият син цвят така и така : D

04/12/2015 16:12:06

malkstor 348 Точки

Варианта с картинката е по-лесен, да, но не ме кефи че е растерна и дребна картинка. Исках да пробвам как се прави като хората с шрифт, така че да може да се скалира понеже е векторна графика :)

Иначе лупичката я има в един куп шрифтове, вкл. Segoe UI, който е системен за Windows, ама явно е друга врътката. Ще видим довечера.

Благодаря и на двама ви :)

04/12/2015 16:25:47 04/12/2015 16:29:46