Как добавить иконку в html
Перейти к содержимому

Как добавить иконку в html

  • автор:

Работа с иконками

Иконки выводятся через псевдоэлемент ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент , но можно использовать и любой другой строчный элемент, например: , и др.

Для указывается два основных класса — fa и fa-icon , где вместо icon пишется имя иконки. Все имена доступны на этой странице.

Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).

Иконки для видеоплеера

Рис. 1. Иконки для видеоплеера

Чтобы добавить иконку с именем play напишем следующий код:

Сам элемент пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.

Размеры иконок

Размер любой иконки из набора мы можем изменить с помощью свойства font-size , переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу как показано в примере 1.

Пример 1. Размер иконок

    Font Awesome   

Исходный размер

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Результат данного примера показан на рис. 2.

Размеры иконок

Рис. 2. Размеры иконок

Цвета

Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color , background , text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.

Пример 2. Оформление иконок через стили

    Font Awesome    

Результат данного примера показан на рис. 3.

Цветные иконки

Рис. 3. Цветные иконки

Font Awesome вводит специальный класс fa-inverse , изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.

Поворот иконок

Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:

  • fa-rotate-90 — поворот на 90º по часовой стрелке;
  • fa-rotate-180 — поворот на 180º;
  • fa-rotate-270 — поворот на 270º;
  • fa-flip-horizontal — отражение по горизонтали;
  • fa-flip-vertical — отражение по вертикали.

Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).

Пример 3. Поворот и отражение иконок

    Font Awesome  

Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.

Преобразования иконки

Рис. 4. Преобразования иконки

Анимация

Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.

Объединение иконок

Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент с классом fa-stack , а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x , в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.

Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).

Пример 4. Комбинация иконок

    Font Awesome     

Результат данного примера показан на рис. 5.

Комбинация иконок

Рис. 5. Комбинация иконок

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

Чтобы добавить иконку на сайт HTML, нужно выполнить следующие шаги:

  1. Создайте иконку размером 16×16 или 32×32 пикселей. Лучше всего использовать формат PNG или ICO.
  2. Назовите файл иконки favicon.ico и сохраните его в корневой папке вашего сайта.
  3. Добавьте следующую строку внутри тега вашей HTML страницы:
 rel="icon" href="favicon.ico" type="image/x-icon"> 

Если иконка не имеет формата .ico, а например .png, то нужно указать соответствующие расширение файла.

Сохраните изменения и загрузите вашу HTML страницу на сервер. Обратите внимание, что некоторые браузеры могут не отображать иконку, если она не имеет формата .ico или если ее размеры не соответствуют стандартным размерам. Также рекомендуется проверить, что иконка правильно отображается в разных браузерах и на разных устройствах.

Как сделать иконку сайта на вкладке html

Для того чтобы добавить иконку сайта на вкладке, нужно использовать тег со значением атрибута rel равным «shortcut icon» и атрибут href указывающий на путь к изображению.

  rel="shortcut icon" href="path/to/icon.png" />  

В этом примере, мы добавляем иконку с путем «path/to/icon.png». Важно, чтобы путь был указан правильно и иконка была доступна по этому пути.

06 апреля 2023

Чтобы добавить иконку для MS Edge, нужно добавить следующие теги внутри тега :

 name="msapplication-TileColor" content="#ffffff" />  name="msapplication-TileImage" content="path/to/ms-icon-144x144.png" />  name="theme-color" content="#ffffff" /> 

Здесь мы указываем цвет плитки приложения для MS Edge в атрибуте content тега с именем msapplication-TileColor . Также мы указываем путь к иконке для MS Edge в атрибуте content тега с именем msapplication-TileImage .

Атрибут name и content тега определяют цвет темы приложения. В данном случае мы указываем, что цвет темы должен быть белым.

06 апреля 2023

Чтобы добавить иконку для IOS, нужно добавить следующие теги внутри тега :

 rel="apple-touch-icon" sizes="180x180" href="path/to/apple-touch-icon.png" />  name="apple-mobile-web-app-capable" content="yes" />  name="apple-mobile-web-app-status-bar-style" content="black" /> 

Здесь мы указываем путь к иконке для IOS в атрибуте href тега . Также мы указываем размеры иконки в атрибуте sizes . Для IOS рекомендуется использовать размер 180×180.

Атрибуты name и content тега определяют поведение веб-приложения на IOS. В данном случае мы указываем, что веб-приложение может быть запущено на IOS и что стиль статус-бара должен быть черным.

Как добавить иконку во вкладку сайта?

Наверняка вы часто видели на других сайтах, что во вкладке рядом с названием сайта находиться маленькая иконка? Обычно там располагается логотип компании. Это привлекает внимание и придает больший авторитет вашему ресурсу. Именно поэтому её и стоить добавить на свой сайт. Ниже я покажу как. Если у вас пока нет иконки — можете попробовать нарисовать тут.

Обычная верстка (HTML)

Тут все просто. Нужно всего лишь добавить внутри тега данный код, заменив путь в атрибуте href на свой. Изображение можно использовать любое.

Выше был пример для изображения в формате png. Можно и использовать другие форматы. Например, gif или ico. Для этого нужно заменить значения атрибута type на image/gif или image/x-icon соответственно.

WordPress

Установить иконку во вкладке сайта на WordPress ещё легче.

1. Для начала войдите на сайт с админа. Далее переходите на главную страницу сайта. Тут вверху вы увидите такую кнопку:

Вход в настройки WordPress

2. Нажав на неё, вы увидите меню, в котором нужно нажать, на указанный пункт.

Пункт меню

3. В низу данного пункта, вы увидите кнопку «Выберите иконку сайта», кликнув на которую, вы сможете выбрать favicon для своего сайта.

Установка иконки

Спасибо за внимание, если у вас остались вопросы — задавайте их в комментарии, буду рад ответить.

Семенюк Назарий

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *