Софтуерно Инженерство
Loading...
+ Нов въпрос
malkstor avatar malkstor 348 Точки

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

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

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

Тагове:
1
Web Fundamentals - HTML5 04/12/2015 13:59:26
stanislawtonkow avatar stanislawtonkow 19 Точки
Best Answer

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

В сайта на SoftUni е използван "Font Awesome Icons", което е иконо-шрифт (не звучи много благозвучно на български), който можеш да си изтеглиш от тук, ако желаеш, но не е задължително, за да го използваш. Просто е нужно да:

  1. Копираш следното в <head>, за да го импортираш. Има и други начини - кой по-правилен, кой по-грешен ще разбереш по-напред, като за вариантите можеш да прочетеш повечко тук.
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

     

  2. Харесваш си икона, която е подходяща за конкретния случай от тук или в твоя случай тази.

  3. Както можеш да намериш в линка на конкретната икона, постяваш реда по-долу на мястото, на което желаеш.

    <i class="fa fa-search"></i>

     

  4. Дооформяш си я както искаш да изглежда, посредством нужните стилове. За големина използваш "font-size" (ако не се лъжа е 20px в конкретния случай) и цвета с "color" (който е бял - #fff). Иначе казано все едно, че стилизираш текст. Можеш да я довършиш, като добавиш "hover" ефекта и другите и шукарийки, ако имаш желание.
     

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

Поздрави.

5
09/12/2015 06:15:41
malkstor avatar malkstor 348 Точки

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

1
Filkolev avatar Filkolev 4428 Точки

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

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

2
malkstor avatar malkstor 348 Точки

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

0
enevlogiev avatar enevlogiev 1169 Точки

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

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

3
malkstor avatar malkstor 348 Точки

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

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

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

1
04/12/2015 16:29:46