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 4482 Точки

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

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

2
malkstor avatar malkstor 348 Точки

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

0
enevlogiev avatar enevlogiev 1168 Точки

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

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

3
malkstor avatar malkstor 348 Точки

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

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

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

1
04/12/2015 16:29:46
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.