Содержание

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

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

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

http://fortawesome.github.io/Font-Awesome/icons

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

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

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

<i></i>

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
 </head>
 <body>
  <p><i></i> Исходный размер</p>
  <p><i></i> fa-lg</p>
  <p><i></i> fa-2x</p>
  <p><i></i> fa-3x</p>
  <p><i></i> fa-4x</p>
  <p><i></i> fa-5x</p>
 </body>
</html>

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

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

Цвета

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-bug { color: #f15a22; }
   .fa-book {
    background: #000; /* Чёрный цвет фона */
    padding: 2px 5px; /* Поля */
    border-radius: 3px; /* Радиус скругления */
   }
   .fa-car {
    color: #96c13c; /* Цвет иконки */
    text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
   }
   .fa-comment {
    color: #f7941e; /* Цвет иконки */
    text-shadow: 0 0 6px #000; /* Размытая тень */
   }
  </style>
 </head>
 <body>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
 </body>
</html>
(adsbygoogle = window.adsbygoogle || []).push({});

Результат данного примера показан на рис. 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. Поворот и отражение иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
 </head>
 <body>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
 </body>
</html>

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

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

Анимация

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

<p><i></i></p>

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

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

<div>
  <i></i>
  <i></i>
</div>

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-ban { 
    color: #d51920; /* Цвет */
    opacity: 0.6; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <div>
   <i></i>
   <i></i>
  </div>
 </body>
</html>

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Page not found (404)

Toggle navigation
  • Packs
    • Значок пакеты недавно Загрузил
    • Самых популярных значок пакеты
    • Эксклюзивные наборы значков
  • категории
    • Сельское хозяйство Иконки
    • Животные Иконки
    • Аватар и смайлики Иконки
    • Красота и мода Иконки
    • Бизнес и финансы Иконки
    • Мультфильм Иконки
    • Кино, телевидение и фильмы Иконки
    • Одежда и аксессуары Иконки
    • Преступление и безопасность Иконки
    • Культура, религия и фестивали Иконки
    • Дизайн и разработка Иконки
    • Экология, окружающая среда и природа Иконки
    • Электронная торговля и покупки Иконки
    • Электронные устройства и оборудование Иконки
    • Файлы и папки Иконки
    • Флаги и карты Иконки
    • Дизайн и разработка Иконки
    • Экология, окружающая среда и природа Иконки
    • Gym и Fitness Иконки
    • Здравоохранение и медицина Иконки
    • Промышленность и инфраструктура Иконки
    • Инфографика Иконки
    • Дети Иконки
    • люблю Иконки
    • Разное Иконки
    • Музыка и мультимедиа Иконки
    • Сеть и связь Иконки
    • Недвижимость и строительство Иконки
    • Школа и образование Иконки
    • Наука и технологии Иконки
    • SEO и Web Иконки
    • Sign и Symbol Иконки
    • Социальные медиа и логотипы Иконки
    • Спорт и игры Иконки
    • Инструменты, строительство и оборудование Иконки
    • Транспорт и транспортные средства Иконки
    • Путешествия, отели и каникулы Иконки
    • Пользовательский интерфейс и жесты Иконки
    • Погода и сезоны Иконки
  • стили значков
    • 3D Иконки
    • Badge Иконки
    • Filled outline Иконки
    • Flat Иконки
    • Glyph Иконки
    • Handdrawn Иконки
    • Long shadow Иконки
    • Outline Иконки
    • Photorealistic Иконки
  • Log in
  • Register
404 Icon by Laura Reen

Как использовать и оформлять иконки с помощью CSS?

  1. Необходимые шаги для использования иконок
  2. Использование иконок Font Awesome
  3. Масштаб иконок Font Awesome и их цвет
  4. Использование иконок с кнопками
  5. Добавление эффекта тени к иконкам
  6. Использование иконок Font Awesome в списке
  7. Анимация иконок Font Awesome
  8. Поворот иконок Font Awesome

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Для использования последней версии иконок this page смотрите эту страницу .

Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Загрузка и установка не требуются.

Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.

Код иконки будет выглядеть следующим образом:

<i></i>

Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента <i> для ссылки на элемент:

<i></i>

Или используйте элемент span:

<span></span>

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <h3>Пример иконок</h3>
    <p>Камера</p>
    <i></i>
    <p>Машина</p>
    <i></i> 
    <p>Конверт</p>
    <i></i>
  </body>
</html>
Попробуйте сами!

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span>fa-sm, fa-lg, fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      div {
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример иконок с указанными размерами и цветами</h3>
    <div>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>
Попробуйте сами!

Смотрите детали:

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      i {
      color: #8ebf42;
      }
      .star {
      font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h3>Пример иконок с установленными размерами шрифта и цвета</h3>
    <div>
      <p>Иконка с размером по умолчанию.</p>
      <i></i>
      <p>Font-size: 2em;</p>
      <i></i>
    </div>
  </body>
</html>
Попробуйте сами!

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Кнопки с иконками</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      button {
      border: none;
      border-radius: 5px;
      color: #ffffff;
      padding: 10px 14px;
      font-size: 16px;
      cursor: pointer;
      }
      button:hover {
      background-color: #666666;
      box-shadow: 2px 4px #999999;
      }
      .btn {
      background-color: #999999;
      }
      .home {
      background-color: #ff6347;
      }
      .menu {
      background-color: #008080;
      }
      .about {
      background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h3>Кнопки с иконками</h3>
    <p>Icon buttons:</p>
    <button>
    <i></i>
    </button>
    <button>
    <i></i>
    </button>
    <button>
    <i></i>
    </button>
    <p>Кнопки с иконками текстов и разными цветами:</p>
    <button>
    <i></i> Home
    </button>
    <button>
    <i></i> Menu
    </button>
    <button>
    <i></i> About
    </button>
  </body>
</html>
Попробуйте сами!

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Пример иконок с тенью текста</h3>
    <div> 
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>
Попробуйте сами!

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

Используйте класс fa-ul для элемента <ul> и класс fa-li для элемента <li>, чтобы заменить маркеры по умолчанию в неупорядоченном списке.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      span {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Иконки в примере со списком</h3>
    <ul>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 1
      </li>
      <li>
        <span>
        <i></i>
        </span>List item 2
      </li>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 3
      </li>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 4
      </li>
    </ul>
  </body>
</html>
Попробуйте сами!

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulseдля вращения иконки с 8 шагами. Отлично работает вместе с fa-spinner.

Будет выглядеть таким образом:

<i></i>

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Иконки с классами fa-spin и fa-pulse</h3>
    <p>Spinner spin:</p>
    <i></i>
    <p>Spinner pulse:</p>
    <i></i>
  </body>
</html>
Попробуйте сами!

Пример с несколькими анимированными иконками:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Анимированные иконки</h3>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </body>
</html>
Попробуйте сами!

Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.

Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Поворот иконок</h3>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </body>
</html>
Попробуйте сами!

Смотрите градус и детали вращения:

Как сделать Форму с иконками



Узнайте, как создать форму с иконками.



Как создать форму значка

Шаг 1) добавить HTML:

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные для каждого поля:

Пример


  Register Form
 
   
   
 

  <div class=»input-container»>
    <i></i>
    <input type=»text» placeholder=»Email» name=»email»>
  </div>

  <div class=»input-container»>
    <i></i>
    <input type=»password» placeholder=»Password» name=»psw»>
  </div>

  <button type=»submit»>Register</button>
</form>



Шаг 2) добавить CSS:

Пример

* {box-sizing: border-box;}

/* Style the input container */
.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

/* Style the form icons */
.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

/* Style the input fields */
.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
.btn {
  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.btn:hover {
  opacity: 1;
}


Совет: Пойдите к нашему учебнику формы HTML для того чтобы выучить больше о формах HTML.

Совет: Перейдите в наш CSS Form учебник, чтобы узнать больше о том, как стиль элементов формы.

Совет: Перейдите на наш CSS Flexbox учебник, чтобы узнать больше о гибкий модуль макета коробки.


Иконки Юникода в HTML

От автора: приветствую вас, уважаемые друзья. В этом уроке мы с вами коснемся темы иконок для сайта. Из урока вы узнаете, как сделать иконки HTML с помощью кода, без использования картинок. При этом сделать иконки можно очень быстро и крайне просто, в частности мы рассмотрим один из занимательных способов использования иконок для сайта, а именно — будем использовать иконки Юникода в HTML.

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

НУЖНЫ ЛИ НАМ ИКОНКИ ДЛЯ САЙТА?

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

ВАРИАНТЫ ИСПОЛЬЗОВАНИЯ ИКОНОК НА САЙТЕ

Вариантов использования иконок для сайта — несколько. Начнем с самого древнего способа, который на данный момент можно считать уже несколько устаревшим. Заключается эта возможность в банальном вырезании иконки из макета. Полученную картинку иконки верстальщик просто вставлял в страницу html тегом img или фоном из css.

Этот способ в современной верстке уже мало используется. У него есть существенный минус: поскольку иконка — это картинка, то ее можно использовать только для конкретного дизайна, для конкретного оформления страницы. Если же завтра мы решим изменить фон сайта, то, скорее всего, придется переделывать и иконку.

Второй путь состоит в «рисовании» иконок через CSS. Это довольно оригинальный способ «на любителя». Подходит он только в некоторых конкретных случаях, например для рисования стрелок. Скажем, у нас есть элементы списка HTML и для каждого элемента необходима простая треугольная стрелочка. Некоторые «рисуют» ее средствами CSS. На мой взгляд этот вариант все же неоправданно избыточен, поскольку CSS используется не совсем по назначению.

Следующая альтернатива уже является современной и, пожалуй, наиболее популярной. Этот вариант заключается в использовании так называемых иконочных шрифтов. Например, иконочный шрифт Font Awesome. Это действительно отличное решение, имеющее массу плюсов.

Поскольку речь идет об иконочном шрифте, постольку к иконком можно применять все те же стили, что и к обычным шрифтам, т.е. задавать им цвет, размер, стиль шрифта. На а это, как вы понимаете, делает такие иконки сайта универсальными. Например, если на сайте изменится цветовое оформление, нам не нужно делать новую иконку, как в случае с картинкой. Достаточно в стилях изменить цвет иконки и продолжать использовать ее и дальше. Удобно, не правда ли?

Ну и количество иконок не может не впечатлять: 585 иконок в наборе на момент написания статьи.

Качество и разнообразие иконок может удовлетворить самый притязательный вкус. В наборе Font Awesome можно подыскать иконку практически для любых целей. Ну а простое внедрение иконки на сайт является дополнительным доводом для использования иконочного шрифта. Давайте, к примеру, возьмем список HTML и для каждого элемента списка используем иконку в виде галочки. Создадим его:

<ul> <li><a href=»#»>Item 1</a></li> </ul>

<ul>

<li><a href=»#»>Item 1</a></li>

</ul>

Теперь в стилях уберем стандартные маркеры для элементов списка:

Скачаем и подключим иконочный шрифт Font Awesome. Из полученного после скачивания архива нас интересует папка fonts, в которой находится иконочный шрифт. Ее мы положим рядом с папкой css. Ну а в папку css положим файл стилей шрифта и подключим его в HTML:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<link rel=»stylesheet» type=»text/css» href=»css/font-awesome.css»>

<link rel=»stylesheet» type=»text/css» href=»css/font-awesome.css»>

Теперь найдем подходящую иконку на сайте Font Awesome. Вы можете искать подходящую иконку, просматривая весь список иконок, или попробовать воспользоваться поиском.

Иконка найдена, вставим ее перед каждым элементом:

<ul> <li><i></i><a href=»#»>Item 1</a></li> </ul>

<ul>

<li><i></i><a href=»#»>Item 1</a></li>

</ul>

И немного оформим:

ul li i.fa{ margin-right: 10px; font-size: 15px; color: #ff0000; }

ul li i.fa{

margin-right: 10px;

font-size: 15px;

color: #ff0000;

}

В итоге мы получим симпатичную иконку для сайта.

Как видим, все крайне просто. При этом, как отмечалось выше, мы можем в любой момент изменить цвет или размер такой иконки. Это просто отлично!

Однако у иконочных шрифтов есть совсем небольшой минус — их необходимо подключать к сайту, а это дополнительные килобайты данных, иногда даже сотни килобайт. Это, конечно, немного. Но если нам нужно использовать, скажем, одну-две иконки, то подключать ради них целый шрифт… эта идея немногим может понравиться. Что же делать, спросите вы? Неужели придется вернуть к первому варианту с картинкой? Нет, не обязательно. Мы можем добавить иконку на сайт без картинки и без дополнительных шрифтов. И для этого мы обратимся к иконкам Юникода в HTML.

ИКОНКИ ЮНИКОДА

Использовать иконки Юникода также просто, как и иконочный шрифт. Вот только подключать нам ничего не нужно, поскольку эти иконки уже есть в кодовой таблице Юникода и доступны нам. Все, что нам потребуется, это найти подходящую иконку в таблице Юникода и узнать ее код. Ну а выбирать действительно есть из чего, посольку кодовая таблица Юникода содержит просто огромное количество всевозможных символов. Подобрать иконку вы можете на следующем замечательном сервисе.

Давайте найдем там галочку, возьмем ее код и добавим для наших элементов. Сделать это можно двумя путями (для каждого символа предлагается 2 кода):

<ul> <!— так —> <li><i>&#x2714;</i><a href=»#»>Item 1</a></li> <!— или так —> <li><i>&#10004;</i><a href=»#»>Item 2</a></li> </ul>

<ul>

<!— так —>

<li><i>&#x2714;</i><a href=»#»>Item 1</a></li>

<!— или так —>

<li><i>&#10004;</i><a href=»#»>Item 2</a></li>

</ul>

Если обновить страницу, то мы почти не заметим разницы между иконкой Font Awesome и иконкой Юникода. Они практически одинаковы. Но использовав символ Юникода, мы при этом не подключали абсолютно ничего. Все работает, как говорится, из коробки. Просто великолепно!

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Редактируемая система SVG-иконок | Vue.js

Простой пример

Есть множество способов создания системы SVG-иконок (SVG Icon System), но один из способов, который использует возможности Vue — создание редактируемых встроенных иконок в виде компонентов. Некоторые преимущества подобного подхода:

  • Их легко редактировать «на лету»
  • Они анимируются
  • Можно использовать обычные входные параметры, со значениями по умолчанию, для сохранения стандартного размера или изменения по необходимости
  • Они встраиваемые, поэтому HTTP-запросы не требуются
  • Они могут быть доступны динамически

Создадим сначала каталог для всех иконок и назовём каждую в едином стиле, чтобы облегчить их поиск:

  • components/icons/IconBox.vue
  • components/icons/IconCalendar.vue
  • components/icons/IconEnvelope.vue

Вот репозиторий с примером для начала работы, где можно увидеть готовую настройку: https://github.com/sdras/vue-sample-svg-icons/(opens new window)

Теперь создадим компонент базовой иконки (IconBase.vue), который использует слот:

<template>
  <svg xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 18 18"
    :aria-labelledby="iconName"
    role="presentation"
  >
    <title
      :id="iconName"
      lang="en"
    >
      {{ iconName }} icon
    </title>
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Можно использовать эту базовую иконку «как есть», но необходимо обновлять viewBox в зависимости от viewBox показываемой иконки. В базовом компоненте определяем входными параметрами width, height, iconColor и имя иконки, чтобы динамически их обновлять. Имя используем для содержимого <title> и для id для лучшей доступности.

Секция script станет выглядеть следующим образом: некоторые значения останутся по умолчанию, поэтому иконка будет отрисовываться всегда одинаково, пока не изменим её:

export default {
  props: {
    iconName: {
      type: String,
      default: 'box'
    },
    width: {
      type: [Number, String],
      default: 18
    },
    height: {
      type: [Number, String],
      default: 18
    },
    iconColor: {
      type: String,
      default: 'currentColor'
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

Компонент можно использовать следующим образом, передавая в слот единственным содержимым IconWrite.vue, содержащим пути внутри иконок:

<icon-base icon-name="write">
  <icon-write />
</icon-base>

1
2
3

Теперь если потребуется несколько иконок с разными размерами — всё очень просто:

<p>
  
  <icon-base
   
   
    icon-name="write"
  >
    <icon-write />
  </icon-base>

  
  <icon-base icon-name="write"><icon-write /></icon-base>

  
  <icon-base
   
   
    icon-name="write"
  >
    <icon-write />
  </icon-base>
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Анимируемые иконки

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

<template>
  <svg
    @click="startScissors"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
   
   
    aria-labelledby="scissors"
    role="presentation"
  >
    <title
     
      lang="en"
    >
      Анимированная иконка с ножницами
    </title>
    <path
     
      fill="#fff"
      d="M0 0h200v100H0z"
    />
    <g ref="leftscissor">
      <path d="M..."/>
      ...
    </g>
    <g ref="rightscissor">
      <path d="M..."/>
      ...
    </g>
  </svg>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { TweenMax, Sine } from 'gsap'

export default {
  methods: {
    startScissors() {
      this.scissorAnim(this.$refs.rightscissor, 30)
      this.scissorAnim(this.$refs.leftscissor, -30)
    },
    scissorAnim(el, rot) {
      TweenMax.to(el, 0.25, {
        rotation: rot,
        repeat: 3,
        yoyo: true,
        svgOrigin: '50 45',
        ease: Sine.easeInOut
      })
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Используем refs для групп элементов, которые будем перемещать. Также, так как обе стороны ножницы должны перемещаться вместе, создаём функцию, которую повторно используем при обращении к refs. Использование библиотеки GreenSock помогает разрешить поддержку анимации и проблемы с transform-origin во всех браузерах.

See the Pen Editable SVG Icon System: Animated icon by Vue (@Vue) on CodePen.

Довольно легко сделано! И легко обновлять «на лету».

Больше анимационных примеров можно посмотреть в репозитории(opens new window)

Дополнительные замечания

Дизайнеры могут поменять своё мнение, требования к продукту измениться. Сохранение всей логики системы иконок в одном базовом компоненте обеспечит возможность быстрого обновления всех иконок по всему приложению. Даже при использовании загрузчика для иконок, некоторые ситуации могут потребовать пересоздания или редактирования каждой SVG-иконки при глобальных изменениях. Этот метод поможет сэкономить время и уменьшить боль.

Когда не следует этого делать

Подобная система SVG-иконок действительно полезна, когда есть несколько иконок, которые используются по-разному на всём сайте. Но если дублируете одну и ту же иконку много раз на одной странице (например иконку удаления во всех строках гигантской таблицы), может имеет больше смысла сделать спрайты, скомпилированные в лист, а затем использовать теги <use> для их загрузки.

Альтернативные варианты

Другие инструменты для помощи в управлении SVG-иконками включают:

Эти инструменты собирают SVG-иконки на этапе компиляции, что добавляет сложности для редактирования во время выполнения, потому что теги <use> могут иметь странные баги с кроссбраузерностью при выполнении чего-то сложного. Они также оставляют с двумя вложенными свойствами viewBox, а значит и двумя системами координат. Это делает реализацию несколько сложнее.

Лучшие наборы иконок для веб-разработчиков

Перевод статьи «Top icons packs and resources for web».

Когда речь заходит о первом впечатлении от сайта или приложения, иконки играют существенную роль. Использование иконок на сайте позволяет эффективно коммуницировать с посетителями: они повышают читабельность, выделяют важный контент, улучшают дизайн.

Но рисовать их с нуля долго и дорого. Поэтому имеет смысл обратить внимание на готовые решения.

Вот несколько доводов в пользу использования иконок в вашем следующем проекте:

  • Иконки помогают повысить читаемость сайта или приложения.
  • Хорошо сделанные иконки помогают уменьшить объем текста.
  • Иконки могут сделать продукт более персонализированным.
  • Они могут стать отправной точкой для знакомства с продуктом.
  • И, наконец, одной из самых важных функций иконок является помощь пользователям в интуитивном понимании приложения, как при знакомстве с ним, так и при дальнейшем использовании.

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

Для легкости восприятия продукты в подборке разделены на категории. Категорию вы сможете найти перед описанием продукта. Речь идет о следующих категориях:

  • Бесплатные наборы иконок.
  • Торговые площадки. Там содержатся иконки разных производителей, отличающиеся как по цене, так и по качеству.
  • Иконки в стиле Material design и Flat.
  • Наборы CSS-иконок. Эти иконки, как следует из названия, созданы на основе CSS. Для их использования нужно просто скопировать код себе на страницу.
  • Иконочные шрифты. В этих шрифтах вместо букв и цифр используются символы. Они популярны в среде веб-дизайнеров, поскольку их можно стилизовать при помощи CSS точно так же, как обычный текст. Браузеры тоже воспринимают иконочные шрифты как текст, так что вам нужно будет нормализовать иконки во избежание проблем со сглаживанием. Иконочные шрифты поддерживаются практически всеми браузерами.
  • SVG-иконки. Масштабируемая векторная графика (SVG) это основанный на XML формат векторной графики, который может масштабироваться до любого размера без потери четкости. Эти иконки могут отображаться при помощи CSS (с тегами объектов и изображений) или их можно вставить прямо в HTML.
  • Наборы символов и пиктограмм.

Наборы и источники

Flaticon

  • Формат файлов, тип ресурса: PNG, SVG, EPS, PSD и BASE 64, торговая площадка.
  • Лицензия и цена: бесплатный (с ограничениями) и премиальный (от 9,99 долларов/месяц) план.

Flaticon содержит полностью редактируемые векторные изображения. Использовать их можно как в личных, так и в коммерческих проектах. Всего там больше двух миллионов иконок, сгруппированных в 51202 набора.

Adobe Extension позволяет легко импортировать иконки в Photoshop, Illustrator и After Effects.

Если вы предпочитаете использовать не статичные файлы, а веб-шрифт, FlatIcon может сгенерировать его для вас путем конвертации иконок. Скачанные иконки также можно кастомизировать.

Основные особенности:

  • Adobe Extension для CC suite;
  • лицензия Linkshare для премиальных вариантов;
  • ежемесячное добавление новых наборов иконок.

Премиальная подписка FlatIcon даст вам полные права по части лицензирования, доступ к эксклюзивному контенту, отсутствие рекламы, а также возможность создавать неограниченные коллекции.

Jam Icons

  • Формат файлов, тип ресурса: SVG, CSS.
  • Лицензия и цена: бесплатно, MIT.

Jam icons это набор из 896 иконок, сделанных вручную. Их можно использовать в веб-проектах и приложениях в виде SVG-файлов, а можно и в виде шрифта с заданными CSS-стилями. Размер иконок — 6px, 24px и 32px. Они могут быть как с заливкой, так и полые.

Fontisto

  • Формат файлов, тип ресурса: CSS
  • Лицензия и цена: бесплатно, MIT

Fontisto это набор векторных иконок. Сами значки можно моментально кастомизировать при помощи CSS: изменить размер, цвет, добавить тень. Поскольку это векторная графика, иконки будут хорошо выглядеть на экранах с высоким разрешением.

На сайте проекта можно найти полную документацию и различные руководства по началу работы и кастомизации продукта. Чтобы начать использовать иконки, можно просто вставить ссылку на сайте. Но Fontisto можно использовать и с менеджерами пакетов (npm, yarn, bower и т. д.).

Iconmonstr

  • Формат файлов, тип ресурса: SVG, EPS, PSD и PNG, торговая площадка.
  • Лицензия и цена: бесплатно.

В коллекции Iconmonstr вы найдете больше четырех тысяч иконок. Каждый набор представлен в двух версиях — с заливкой и без, что позволяет использовать эти иконки в самых разнообразных приложениях. Все иконки на сайте можно использовать бесплатно, в том числе в коммерческих целях. Иконки оптимизированы для использования в вебе.

Библиотека иконок Pixsellz

  • Формат файлов, тип ресурса: SVG, EPS, PSD, PNG, FIG, Material design.
  • Лицензия и цена: бесплатно, Apache License Version 2.0.

Огромный пакет, содержащий больше тысячи иконок, разделенных на 16 категорий. Иконки выдержаны в стиле Material design, в трех разных видах: с закруглениями, в виде контуров и двуцветные. Набор доступен в шести форматах файлов, подходящих для различных программ.

Entypo

  • Формат файлов, тип ресурса: SVG.
  • Лицензия и цена: бесплатно, Creative Common License 4.0.

Entypo это набор svg-иконок, тщательно разработанных несколько лет назад Дэниелом Брюсом из Швеции. Иконки превосходны; если говорить о бесплатных, то они точно лучшие. Всего их в наборе 411, использовать можно бесплатно под лицензией Creative Commons.

По словам автора, создание шрифта требует большого количества времени, которое он предпочитает потратить на разработку новых пиктограмм.

Evil Icons

  • Формат файлов, тип ресурса: SVG, Sketch.
  • Лицензия и цена: бесплатно, MIT.

Это очень объемный набор, в котором вы найдете и SVG, и исходные файлы. То есть, можно скачать файлы для Illustrator и .sketch-файлы для Sketch.

Все иконки выполнены в стиле тонких линий, что прекрасно подходит для большинства сайтов. А возможность редактировать исходные файлы делает этот набор особенно ценным.

Streamline icons

  • Формат файлов, тип ресурса: ICONJAR, Sketch, FIG, XD, SVG, AI, PDF, PNG.
  • Лицензия и цена: от бесплатного использования до $411.

Streamline Icons это еще один бесплатный набор красивых иконок. Всего значков в наборе больше 30 тысяч (они разделены на 53 категории).

Это один из немногих наборов, оптимизированных для Sketch, благодаря чему можно изменять ширину линий и цвет значков. Каждая иконка в Streamline 3.0 представлена в трех вариантах: light, regular и bold.

Компания имеет собственное веб-приложение, позволяющее искать и скачивать иконки при помощи браузера.

Smashicons

  • Формат файлов, тип ресурса: JAR, SVG, AI, Sketch, торговая площадка.
  • Лицензия и цена: 5 долларов в месяц.

В коллекции Smashicons больше 219 тыс. иконок, совместимых со многими платформами. Есть простое в использовании веб-приложение для поиска значков.

Монетизируется Smashicons несколько иначе, чем другие библиотеки. Здесь есть платная подписка, цена — 5 долларов ежемесячно. За эту сумму вы получаете доступ ко всей уже существующей коллекции, а также ко всем иконкам, которые будут выпущены в дальнейшем.

Icons8

  • Формат файлов, тип ресурса: SVG, PNG, PDF.
  • Лицензия и цена: Good Boy License, от бесплатного использования до 19,9 долларов в месяц.

В коллекции Icons8 вы найдете больше 120 тысяч иконок разных категорий (бизнес, офис, люди, еда, социальные сети) в разных стилях (в виде контуров, с заливкой, полноцветные). Значки разработаны так, чтобы соответствовали стилю определенной операционной системы. Есть версии для Windows, iOS и Android.

Иконки работают в Sketch, Photoshop и Xcode. Перед скачиванием можно воспользоваться веб-редактором.

Icomoon

  • Формат файлов, тип ресурса: SVG, PNG, PDF.
  • Лицензия и цена: от бесплатного использования до 139 долларов в месяц.

Icomoon поставляется в качестве инструмента иконографии и менеджмента иконок. Для этих целей продукт имеет очень качественное решение. Коллекция значков постоянно обновляется создателями.

Каждый отдельный набор иконок содержит подробную информацию о лицензировании, так что разработчик будет точно знать, каким образом может их использовать.

Также возможно создание собственных иконочных шрифтов.

Glyphish

  • Формат файлов, тип ресурса: SVG, PNG, PDF, PSD, Glyph, иконочный шрифт.
  • Лицензия и цена: Creative Common Attribution, от $25 до $99.

Glyphish предлагает несколько разных наборов иконок. Каждый набор поставляется в разных форматах, включая PNG, SVG, PSD и AI. Базовый набор иконок доступен по цене в 25 долларов, а расширенный обычно стоит $99. В бесплатной демо-версии вы найдете 50 значков. Все они пригодны для редактирования.

Основные особенности:

  • иконки для нескольких платформ (iOS, Android, веб, Windows),
  • набор из 50 бесплатных иконок,
  • легкое перетаскивание в Xcode,
  • размер иконок специально подогнан для дисплеев Apple Retina.

Ionicons

  • Формат файлов, тип ресурса: SVG и веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно, MIT.

Команда Ionic решила выпустить свои иконки в качестве шрифта под названием Ionicons. Всего их больше тысячи, они совершенно бесплатны и доступны на GitHub. Вы можете добавить эти иконки на свой сайт, используя CDN-версию таблицы стилей. Полностью поддерживаются SVG и веб-шрифты.

Основные особенности:

  • легкое использование путем копипаста ссылки,
  • поставляются в виде веб-шрифта,
  • подобранные размеры.

Angular Material Icons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, Material design.
  • Лицензия и цена: бесплатно, Apache License 2.0.

Material Icon это бесплатный набор иконок от Google. Для обеспечения читаемости и четкости эти иконки оптимизированы для всех платформ и дисплеев. Они совершенно бесплатны и доступны на GitHub. В наборе вы найдете больше тысячи значков для самых разных нужд интерфейса.

Все символы доступны в пяти разных темах. Лучший формат для веб-проектов — простой в использовании иконочный веб-шрифт.

Linearicons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: от бесплатного использования до $59, Common Creative License.

Набор иконок Linear Icon — один из самых популярных, как для личного, так и для коммерческого использования. Имеет бесплатную и премиальную версию. Бесплатная версия этого прекрасного набора поставляется под лицензией Creative Common.

Иконки разделены на разные пакеты (например, Desktop Package) — можно выбирать наиболее подходящий для своих нужд.

Feathericons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно, MIT.

Feather это один из самых популярных наборов иконок open-source. Значки доступны в SVG-формате, всего их больше 250.

Иконки легко редактировать; вне зависимости от размера, выглядят они очень четко. Эти значки изначально разрабатывались в качестве иконочного шрифта, так что с использованием в качестве веб-шрифта проблем не будет.

Iconfinder

  • Format: SVG, PNG, ICO, торговая площадка.
  • Лицензия и цена: от $9 до $49 в месяц, есть предоплаченный тариф.

Iconfinder это один из самых популярных источников иконок в сети. Он предлагает больше 4 миллионов иконок, предоставляя пользователям широкие возможности для поиска (по формату, цене, размеру, фону и т. д.).

Файлы иконок доступны в форматах SVG, PNG, ICO, ICNS и Adobe Illustrator, расширение ранжируется между 16×16 и 512×512. Если не найдете подходящих для себя иконок, можно поработать с лучшими дизайнерами сайта, чтобы создать значки специально для вашего бренда.

The Noun Project

  • Формат файлов, тип ресурса: SVG, PNG, торговая площадка.
  • Лицензия и цена: Creative Commons License, от $39.99.

The Noun Project предлагает одну из самых обширных библиотек иконок в интернете. Большинство значков доступны в форматах SVG и PNG, в черном и белом стиле.

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

Поиск по библиотеке очень прост. Коллекция насчитывает больше 150 тысяч иконок и регулярно обновляется: ежедневно добавляются новые иконки и наборы.

Иконки Fontawesome

  • Формат файлов, тип ресурса: SVG, PNG, иконочный шрифт, торговая площадка.
  • Лицензия и цена: SIL OFL 1.1.

Font Awesome это один из самых популярных и самых используемых наборов иконок. Это также дефолтный набор команды Bootstrap. Среди прочих форматов, иконки доступны в формате SVG. Лицензия открыта, иконки можно использовать бесплатно как в личных, так и в коммерческих целях.

Каждая иконка полностью масштабируема и управляется напрямую через CSS. Вы можете менять цвета, тени, градиенты фона и т. д. при помощи чистого CSS3. Еще один довод в пользу этой библиотеки — полная оптимизация и отсутствие проблем с совместимостью, поскольку здесь вообще не участвует JavaScript.

Основные особенности:

  • это векторный шрифт,
  • можно использовать бесплатно,
  • иконки созданы с учетом требований к доступности,
  • легкое обновление на сайте.

Lineicons

  • Формат файлов, тип ресурса: SVG, веб-шрифт, иконочный шрифт.
  • Лицензия и цена: бесплатно.

Этот набор содержит больше 450 иконок в разных категориях. То есть, вы точно найдете здесь нужную иконку для вашего проекта. LineIcons также предоставляет бесплатную CDN с понятной документацией для легкого старта.

Иконки представлены как в виде веб-шрифта, так и в виде SVG-файлов, что позволяет выбирать наиболее подходящий вариант для вашего проекта.

Итоги

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

Надеюсь, эта статья поможет вам выбрать наиболее подходящее для вас решение.

иконок CSS


Значки можно легко добавить на HTML-страницу с помощью библиотеки значков.



Как добавить значки

Самый простой способ добавить значок на HTML-страницу — использовать библиотеку значков, например, Font Awesome.

Добавьте имя указанного класса значков к любому встроенному элементу HTML (например, или <диапазон> ).

Все значки в приведенных ниже библиотеках значков являются масштабируемыми векторами, которые могут быть настроены с помощью CSS (размер, цвет, тень и т. д.).)


Иконки Font Awesome

Чтобы использовать значки Font Awesome, перейдите на fontawesome.com, войдите в систему и получите код для добавления в раздел вашей HTML-страницы:

Подробнее о том, как начать работу с Font Awesome, читайте в нашем Шрифт Шикарный урок 5.

Примечание: Загрузка и установка не требуются!

Пример










Результат:

Попробуй сам »

Для получения полной информации обо всех значках Font Awesome посетите наш Справочник по значкам.



Иконки начальной загрузки

Чтобы использовать глификоны Bootstrap, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Пример










Результат:

Попробуй сам »

Иконки Google

Чтобы использовать значки Google, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Пример





облако
избранное
приложение
компьютер
трафик


Результат:

Попробуй сам »

Учебное пособие по иконкам



Как добавить значки

Чтобы вставить значок, добавьте имя класса значка в любой встроенный элемент HTML.

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

Все значки в приведенных ниже библиотеках значков являются масштабируемыми векторными значками, которые могут быть настроены с помощью CSS (размер, цвет, тень и т. д.)


Font Awesome 5 Icons

Чтобы использовать значки Free Font Awesome 5, перейдите на fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

Подробнее о том, как начать работу с Font Awesome, читайте в нашем Шрифт Awesome 5 глава.

Примечание: Загрузка и установка не требуются!

Пример




ваш код .js» crossorigin=»anonymous»>






Попробуй сам »

Font Awesome 4 иконки

Чтобы использовать значки Font Awesome 4, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Пример










Попробуй сам »

Bootstrap 3 иконки

Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Пример










Попробуй сам »

Примечание. Глификоны не поддерживаются в Bootstrap 4.

Для получения дополнительной информации о Bootstrap 3 и Glyphicons посетите наш учебник по Bootstrap 3.


Иконки Google

Чтобы использовать значки Google, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Пример





облако
избранное
приложение
компьютер
трафик


Попробуй сам »

Полный список ВСЕХ значков (шрифт awesome, bootstrap и google) см. Справочник по значкам.



Манифесты веб-приложений | MDN

Манифесты веб-приложений являются частью набора веб-технологий, называемых прогрессивными веб-приложениями (PWA), которые представляют собой веб-сайты, которые можно установить на домашний экран устройства без магазина приложений. В отличие от обычных веб-приложений с простыми ссылками или закладками на главном экране, PWA можно загрузить заранее и работать в автономном режиме, а также использовать обычные веб-API.

Манифест веб-приложения предоставляет информацию о веб-приложении в текстовом файле JSON, необходимую для загрузки веб-приложения и представления его пользователю аналогично нативному приложению (т.g., быть установленным на главном экране устройства, предоставляя пользователям более быстрый доступ и более богатый опыт). Манифесты PWA включают его имя, автора, значок(и), версию, описание и список всех необходимых ресурсов (среди прочего).

Веб-манифесты могут содержать следующие ключи. Нажмите на каждый из них, чтобы перейти к дополнительной информации о нем:

  {
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "имя": "ХакерВеб",
  "short_name": "ХакерВеб",
  "start_url": ".",
  "дисплей": "автономный",
  "background_color": "#fff",
  "description": "Удобное для чтения приложение Hacker News.",
  "значки": [{
    "src": "images/touch/homescreen48.png",
    "размеры": "48x48",
    "тип": "изображение/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "размеры": "72x72",
    "тип": "изображение/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "размеры": "96x96",
    "тип": "изображение/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "размеры": "144x144",
    "тип": "изображение/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "размеры": "168x168",
    "тип": "изображение/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "размеры": "192x192",
    "тип": "изображение/png"
  }],
  "related_applications": [{
    "платформа": "играть",
    "url": "https://play.google.com/store/apps/details?id=cheeun.hackerweb"
  }]
}
  

Манифесты веб-приложений развернуты на ваших HTML-страницах с помощью элемента в документа:

  <ссылка rel="манифест" href="манифест.json">
  

Расширение .webmanifest указано в разделе регистрации типа носителя спецификации (ответ файла манифеста должен возвращать Content-Type: application/manifest+json ). Браузеры обычно поддерживают манифесты с другими соответствующими расширениями, такими как .json ( Content-Type: application/json ).

Если для получения манифеста требуются учетные данные, для атрибута cross-origin должно быть установлено значение use-credentials , даже если файл манифеста находится в том же источнике, что и текущая страница.

  
  

В некоторых браузерах (например, Chrome 47 и более поздние версии) для сайтов, запускаемых с рабочего стола, отображается заставка. Этот экран-заставка автоматически создается из свойств в манифесте веб-приложения, а именно:

.

Таблицы BCD загружаются только в браузере

Iconify

Более 100 наборов иконок, одна библиотека.


Более 100 000 векторных иконок с открытым исходным кодом.

Доступно множество отличных наборов иконок. Каждый набор иконок имеет свой собственный пользовательский синтаксис, некоторые доступны только как шрифты. К сожалению, почти все они загружают весь набор, даже если вы показываете только несколько иконки. Это затрудняет использование разных наборов иконок.

Iconify пытается объединить все наборы иконок. Вы можете использовать тот же код нет независимо от того, какой набор иконок вы выберете. Вы можете смешивать значки из нескольких значков наборы на той же странице.

SVG-фреймворк Применение:

<скрипт источник = "https://код.iconify.design/2/2.1.2/iconify.min.js">

Реагировать Применение:

импортировать { Icon } из ‘@iconify/react’;

Стройный Применение:

импортировать иконку из ‘@iconify/svelte’;

По умолчанию, Iconify предлагает более 100 000 иконок из более чем 100 наборы иконок с открытым исходным кодом.

Все иконки проверяются, очищаются, оптимизируются и регулярно обновлено.

Вы можете использовать Iconify со своими собственными значками или со значком премиум-класса. наборы тоже.

Данные для всех значков с открытым исходным кодом хранятся в простом для использования формате JSON и может быть получен из:

Вы можете использовать данные значка в пользовательских инструментах, пользовательский значок компоненты. Вы также можете преобразовать свои собственные значки в JSON. формат с помощью библиотек Iconify.

Для разработчиков Iconify предлагает:

Iconify — это проект с открытым исходным кодом.

Инфраструктура Iconify SVG имеет двойную лицензию Лицензия Апач 2.0 а также Лицензия GPL 2.0. Вы можете выбрать по своему усмотрению одну из вышеперечисленных лицензий.

Другие компоненты и инструменты значков лицензируются по лицензия MIT.

Лицензии Apache 2.0 и MIT разрешают практически все, в том числе коммерческое использование.

Лицензия GPL 2.0 позволяет использовать более строгие популярные программы с открытым исходным кодом. проекты.

Эта лицензия не распространяется на значки. Иконки выпускаются под разными лицензии, подробности см. в каждом наборе значков. Доступные по умолчанию наборы значков: все под лицензией какой-то с открытым исходным кодом.

Просматривать все 100к+ иконок Документация

Получите бесплатные иконки, написав URL

Использование

Вставьте тег прямо в ваш HTML. Icons8 найдет соответствующий значок и сгенерирует его в правильный фасон, размер и цвет.

Он находит значок поиска в нашем самом популярном стиле с разрешением по умолчанию для этого стиля (50 пикселей). и черный цвет.

Для имен значков, состоящих из двух и более слов, используйте — или _ для разделения. Например: стрелка влево.

Чтобы узнать, что у нас есть, попробуйте выполнить поиск в нашем веб-приложении или загрузите наши приложения для Mac и Windows — это бесплатно, удобно и работает в автономном режиме.

Цвет

Значок изменен на #2266EE. Цветные значки не могут быть перекрашен.

Стиль

Значок поиска в стиле Windows 10. Другие стили являются:

Проверьте все стили в нашем веб-приложении.

Размер

Иконка изменена на 96x96px.Выберите любое значение до 512. Каждый стиль имеет размер, для которого он предназначен, а также называется пикселей идеального размера :

  • iOS: 50×50
  • Windows 8: 26×26
  • Windows 10: 32×32
  • Android 4: 24×24
  • Android 5: 24×24
  • Цвет: 48×48
  • Офис: 16×16, 30×30, 40×40, 80×80

Когда это возможно, используйте умножение стиля pixel perfect.Например, для iOS используйте 50 x 50, 100 x 100, 150х150 и т.д.

Лицензия

Иконки создаются Icons8. Пожалуйста, либо дайте ссылку, либо купите.

Кредиты

  • Вдохновленный микроиконой Брента Джексона. Брент, твоя идея классно.
  • Ускорено CDN77 и замечательными людьми, работающими там.

Помогите нам

  • Станьте нашим спонсором для серверов Linux или Windows
  • Напишите плагин для вашей IDE (мы предоставим API)
  • Напишите плагин для webpack и gulp для загрузки вставленных значков и их локального хранения
  • Помогать другим разработчикам? Используйте боже мой! в коде, ответы Stack Overflow, и учебники
  • Обучение? Покажи боже мой! в своем курсе и сэкономьте своим студентам несколько месяцев жизнь
  • Купите нашу платную лицензию.
Сообщество здесь

Больше бесплатных вещей

  • Загрузите все 100 000+ значков для автономного использования
  • Line Awesome — как Font Awesome, но в виде контура. стиль

Pure CSS GUI icons — Николас Галлахер

Эксперимент, в котором используются псевдоэлементы для создания 84 простых GUI значков с использованием CSS и семантического HTML. Совместно используется как упражнение в творческом решении проблем и работе в рамках ограничений.Это не готовый к производству набор иконок CSS.

Демонстрация: значки GUI на чистом CSS

Известная поддержка : Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

Упражнение в ограничении

Несколько месяцев назад я экспериментировал с созданием общих значков GUI с помощью CSS. HTML очень прост и опирается на псевдоэлементы CSS, а не на посторонние элементы HTML. Технические аспекты этого упражнения могут быть интересны другим, поэтому я решил поделиться им.

Псевдоэлементы предоставляют множество возможностей разработчикам, заинтересованным в улучшении существующего семантического HTML.

Код примера

Техника, лежащая в основе этого эксперимента, представляет собой расширение базового создания формы, которое использовалось для создания речевых пузырей на чистом CSS. Некоторые из этих значков графического интерфейса могут быть созданы только в браузерах, поддерживающих преобразование CSS3.

HTML — это простой неупорядоченный список ссылок.

    

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

  .expand a:before { 
content: «»;
позиция: абсолютная;
верх: 50%;
слева: 1 пиксель;
ширина: 5px;
высота: 0;
граница-ширина: 7px 7px 0;
бордюр: сплошной;
цвет границы: прозрачный #c55500;
верхнее поле: -4px;
-webkit-transform: повернуть (-45 градусов);
-moz-transform: повернуть (-45 градусов);
-o-transform: повернуть (-45 градусов);
преобразование: поворот (-45 градусов);
}

.расширить: после {
содержание: "";
позиция: абсолютная;
верх: 50%;
слева: 5 пикселей;
ширина: 8px;
высота: 8px;
ширина границы: 3px 0 0 3px;
бордюр: сплошной;
цвет границы: #c55500;
поле-верх: -6px;
}

.expand a:hover:before,
.expand a:focus:before,
.expand a:active:before {
цвет границы: прозрачный #730800;
}

.expand a:hover:after,
.expand a:focus:after,
.expand a:active:after {
border-color: #730800;
}

Демонстрационная страница содержит полный набор значков взаимодействия с пользователем и управления медиаплеером, а также другие распространенные значки.На данный момент для некоторых значков фактически требуется более одного элемента, поскольку CSS 2.1 указывает только 2 псевдоэлемента на элемент, который может содержать сгенерированное содержимое. Модуль сгенерированного и замененного содержимого CSS3 допускает неограниченное количество псевдоэлементов, но еще не полностью реализован ни в одном современном браузере.

значок — Ant Design

API #

Общий значок #

9
Описание Описание Версия
Classname Строка
Поворот Повернуть на N Генеры (не работает в IE9) Номер
Спин Вращают значок с анимацией Boolean False Свойства стиля значка, такие как fontSize и color CSSProperties
twoToneColor Поддерживает только двухцветный значок.Укажите основной цвет строка (шестнадцатеричный цвет)

У нас по-прежнему есть три разные темы для значков, имя компонента значка — это имя значка с суффиксом имени темы.

  import {StarOutlined, StarFilled, StarTwoTone} из '@ant-design/icons';


<Заполнено звездой />
  

пользовательских значок #

5 версия
Property Type тип
Компонент Компонент, используемый для корневого узла ComponentType
Rotate Rotate градусов (не работает в IE9) Номер
Spin ROTATE Значок с анимацией Boolean ложный
Стиль Стиль свойств иконок, таких как FONTSIZE и COLOR и CSSPROPERTIES - -

5

О SVG Icons #

Мы представили SVG иконы в версии 3.9.0 , замена значков шрифтов. Это имеет следующие преимущества:

  • Полное автономное использование значков, независимо от файла значка шрифта, размещенного в CDN (больше нет пустого квадрата во время загрузки и нет необходимости развертывать файлы значка шрифта локально!)

  • Многое более точное отображение на экранах с более низким разрешением

  • Возможность выбора цвета значка

  • Нет необходимости изменять встроенные значки с переопределяющими стилями, предоставляя больше свойств в компоненте №10353.

    ⚠️ Учитывая дополнительный размер пакета, вызванный всеми значками SVG, импортированными в 3.9.0, мы предоставим новый API, позволяющий разработчикам импортировать значки по мере необходимости, вы можете отслеживать # 12011 для обновлений.

    Пока вы ждете, вы можете использовать подключаемый модуль webpack от сообщества, чтобы разбить файл значка.

    Свойства тема , компонент и twoToneColor были добавлены в 3.9.0 . Лучше всего передать свойство theme каждому компоненту .

      import {MessageOutlined} из '@ant-design/icons';
    
    ;  

    Все значки будут отображаться в . Вы все еще можете установить стиль и className для размера и цвета значков.

        

    Set TwoTone Color#

    При использовании двухцветного значки, вы можете использовать статические методы getTwoToneColor() и setTwoToneColor(colorString) , чтобы указать основной цвет.

      import {getTwoToneColor, setTwoToneColor} из '@ant-design/icons';
    
    setTwoToneColor('#eb2f96');
    получитьДвутоновыйЦвет();  

    Значок пользовательского шрифта#

    Мы добавили функцию createFromIconfontCN , чтобы помочь разработчикам использовать свои собственные значки, развернутые на iconfont.cn, удобным способом.

    Этот метод указан для iconfont.cn.

      import { createFromIconfontCN } из '@ant-design/icons';
    
    const MyIcon = createFromIconfontCN({
      scriptUrl: '//в.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
    });
    
    ReactDOM.render(, mountNode);  

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

    Следующие варианты доступны:

    недвижимость Описание Описание Тип Версия
    ExtraCommonprops Определите дополнительные свойства к компоненту {[KEY: String]: any } {}
    scriptUrl URL-адрес, сгенерированный iconfont.сп проект. Поддержка string[] после @ant-design/[email protected] string | string[] -

    Свойство scriptUrl должно быть установлено для импорта символов спрайта SVG.

    См. документы iconfont.cn, чтобы узнать, как сгенерировать scriptUrl .

    Пользовательский значок SVG#

    Вы можете импортировать значок SVG в качестве компонента реакции, используя webpack и @svgr/webpack . @svgr/webpack options ссылка.

     
    {
      тест: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      использовать: [
        {
          загрузчик: 'babel-loader',
        },
        {
          загрузчик: '@svgr/webpack',
          опции: {
            вавилон: ложь,
            значок: правда,
          },
        },
      ],
    }  
      импортировать значок из '@ant-design/icons';
    импортировать MessageSvg из 'path/to/message.svg';
    
    
    
    ReactDOM.render(, mountNode);  

    следующие свойства доступны для компонента:

    недвижимость Описание Описание типа Readonly версия
    Classname Компьютерное название классов SVG Element string - - -
    Определить цвет Определить цвет Элемент Строка CurrentColor
    Высота SVG Элемент строка | Номер 1EM
    Стиль вычисляемый стиль SVG Элемент CSSProperties -
    Ширина

    0

    Ширина SVG Элемент Строка | номер 1em
    .

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

Ваш адрес email не будет опубликован.