Как вставить иконку на сайт html | WAVIFUN.RU

Как быстро вставить иконку на сайт с помощью html

как вставить иконку на сайт html

Привет всем любителям-сайтостроителям, сегодня расскажу, как быстро вставить иконку на сайт с помощью html. Знаю два способа о которых хочу рассказать:

Первый способ — очень простой. Для того, чтобы его использовать необходимо знать специальный HTML5 код символов. Вообще в интернете много ресурсов, которые представляют таблицу спецсимволов HTML5, которые можно найти по запросу «спецсимволов HTML5».

Ниже пример применения иконок на сайте с помощью HTML5 символов:

Второй способ — не менее простой, но более гибкий и дающий больше возможностей. Здесь речь пойдет о применении стороннего сервиса Font Awesome. Для того чтобы использовать его, необходимо зайти на сайт и в верхнем меню нажать «Get Started» (выделено красным)

как вставить иконку на сайт html

Далее попадаем на страницу, где нужно выбрать метод использования иконок на сайте. Рекомендую выбрать метод «Web Fonts with CSS»

как вставить иконку на сайт html

Далее мы попадаем на страничку, где нам нужно скопировать код:

как вставить иконку на сайт html

И далее этот код вставить в код сайта в разделе <head></head>

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Всё для сайта и сайтостроения</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>

Далее мы можем использовать иконки Font Awesome. Переходим в раздел Icons в верхнем меню

как вставить иконку на сайт html

Находим нужную иконку. Можно использовать поиск или просто найти, пролистывая страничку вниз. После того как нашли нужную иконку жмем на нее, находим код типа

<i class="fas fa-home"></i>

И вставляем его в нужном месте сайта.

Использование данного сервиса имеет как плюсы, так и минусы. Из плюсов: Мы можем редактировать иконки как текст на css: изменять размер, цвет, отступы и т.д. Также есть небольшой минус  лицензия на использование данного ресурса частично бесплатная, при поиске вы будете видеть затемненные иконки, которые не сможете использовать до оплаты лицензии.

На этом всё, если вам понравилась статья, ставьте LIKE. Если есть вопросы, задавайте, будут рад помочь.

11.03.2018
5531
0
5 2 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии

Так вы сможете получать новые статьи первыми

Pin It on Pinterest