1 Востаннє редагувалося Monolith (10.08.2016 13:04:06)

Тема: Як правильно додати іконки на сайт?

На сайті треба додати іконки соціальних мереж(типу "Приєднуйтесь до нас..."). Саме питання полягає у тому як правильно це зробити. Спочатку додавав за допомогою тегу img, але і сам зрозумів, що то не кращий варіант: картинки індексуються пошуковою системою. Зараз додав як фон для елементів списку li, але це теж здається неправильно. Тим паче не знаю як додати ефекти при наведенні(змінювати фон?), тому спробував зробити через ::after, але...Загалом в Інтернеті не знайшов інформації як правильно робити(скоріше або погано, або не те шукав). Іконки всього три, і особливо там не треба чогось складного, але хочеться навчитися робити правильно, щоб не розгубитись, якщо знадобиться писати великий проект, а не просто сайт для себе. Тому якщо хтось знає, то може підказати будь ласка, або хоча б сказати де шукати? Буду вдячний.   :)
P.S. Наприклад http://codeguida.com/, там у підвалі іконки. Не зрозумів як реалізований ефект при наведенні...

2

Re: Як правильно додати іконки на сайт?

:hover пробували? на цьому сайті саме так і зроблено

https://i.imgur.com/iPb89HM.png

Подякували: Monolith1

3

Re: Як правильно додати іконки на сайт?

font-awesome вам в допомогу, там так і зроблено

Подякували: Monolith, leofun012

4

Re: Як правильно додати іконки на сайт?

Спочатку додавав за допомогою тегу img, але і сам зрозумів, що то не кращий варіант: картинки індексуються пошуковою системою.

<noindex>

Подякували: Monolith1

5

Re: Як правильно додати іконки на сайт?

Дякую. Буду використовувати Font Awesome. Реально крута річ. Чув про неї, але не знав що це. Тепер знаю. Ще раз дякую.  *DRINK*

6 Востаннє редагувалося Key (11.08.2016 08:27:52)

Re: Як правильно додати іконки на сайт?

https://icomoon.io/ як альтернатива

зазвичай даю на ховер opacity:.7;

Подякували: Monolith, leofun01, 221VOLT3

7 Востаннє редагувалося leofun01 (13.08.2016 11:52:00)

Re: Як правильно додати іконки на сайт?

Це все добре, але краще використовувати SVG. Тому що користувач може відключити завантаження сторонніх шрифтів і в такому випадку сторінка буде виглядати так:
https://replace.org.ua/misc.php?action=pun_attachment&amp;item=1343&amp;download=0

Вставляйте SVG-код (починаючи з "<svg>" і закінчуючи "</svg>") прямо в HTML і в DOCTYPE (на початку всього HTML-документа) додайте наступне:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

Про DOCTYPE детальніше тут.
І краще використовувати XHTML. Диктатори стандартів планують викинути HTML.

Post's attachments

codeguida_Scrn.png 875 b, 216 downloads since 2016-08-13 

Подякували: Monolith, 221VOLT2

8

Re: Як правильно додати іконки на сайт?

leofun01 написав:

Це все добре, але краще використовувати SVG. Тому що користувач може відключити завантаження сторонніх шрифтів і в такому випадку сторінка буде виглядати так:
https://replace.org.ua/misc.php?action=pun_attachment&amp;item=1343&amp;download=0

Вставляйте SVG-код (починаючи з "<svg>" і закінчуючи "</svg>") прямо в HTML і в DOCTYPE (на початку всього HTML-документа) додайте наступне:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus SVG 1.1//EN"
    "[url]http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd[/url]">

Про DOCTYPE детальніше тут.
І краще використовувати XHTML. Диктатори стандартів планують викинути HTML.

от наприклад, ви коли останній раз вимимкали "завантаження сторонніх шрифтів"? А якщо юзер не програмер, то навіть не подумає вимкнути. Це просто міри, для "параноїків".

Ну якщо вже так хочете то тримайте font-awesome в svg http://codeguida.com/sweetie/244/

Подякували: leofun011

9

Re: Як правильно додати іконки на сайт?

І краще використовувати XHTML. Диктатори стандартів планують викинути HTML.

Планували. Але, схоже, ця інформація застаріла, а стандарт html5 ще більш віддалився від xml, узаконивши спрощення коду, які, втім, і раніше підтримувались більшістю браузерів.

Подякували: 221VOLT1

10

Re: Як правильно додати іконки на сайт?

Q-bart написав:

от наприклад, ви коли останній раз вимимкали "завантаження сторонніх шрифтів"?

В мене вони завжди виключені. Інакше я б навіть не помітив.

Q-bart написав:

Це просто міри, для "параноїків".

В воєнкоматі мені так і написали: психічні відхилення, параноїдальний синдром.

Подякували: 221VOLT1