Иконки css: Все иконки Font Awesome

Содержание

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

Содержание:¶

Необходимые шаги для использования иконок
Использование иконок Font Awesome
Масштаб иконок Font Awesome и их цвет
Использование иконок с кнопками
Добавление эффекта тени к иконкам
Использование иконок Font Awesome в списке
Анимация иконок Font Awesome
Поворот иконок Font Awesome

Необходимые шаги для использования иконок¶

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

1) Подключите иконки к сайту ¶

Скопируйте код, предоставленный веб-страницей 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">

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

2) Добавьте иконки к вашему UI¶

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

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

<i></i>

3) Добавьте стиль к иконкам¶

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

Как использовать иконки Font Awesome¶

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

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

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

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

<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>

Попробуйте сами!

Масштаб иконок Font Awesome и их цвет¶

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

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

Пример¶

<!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>

Попробуйте сами!

Использование иконок Font Awesome в списке¶

С помощью иконок можно сделать много всего! Можете оформлять ваши 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>

Попробуйте сами!

Анимация иконок Font Awesome¶

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-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>

Попробуйте сами!

Поворот иконок Font Awesome¶

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

Для произвольного поворота и отражения иконок используйте классы 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>

Попробуйте сами!

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

W3.CSS Иконки

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

С W3.CSS вы можете использовать любую библиотеку значков, как:

Шрифт Высокий Иконки
Google Материал Иконки
Bootstrap Иконки

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

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

Для того, чтобы контролировать размер значка, изменить свойство размера шрифта значка, или использовать классы w3- размер:

W3-крошечное
W3-маленький
W3-большой
W3-XXLarge
W3-XXXLarge

Шрифт Высокий Иконки

фа фа-домой

Ф.А. к.-а.-бары

фа фа-стрелка-влево

фа фа-стрелка-вправо

фа фа-поиска

фа фа-близко

фа фа-обновления

фа фа-трэш

фа фа-самец

фа фа-автомобиль

фа фа-грузовик

фа фа-плоскости

пример

W3.CSS







</body>
</html>
Попробуй сам »
Для получения полного списка иконок: Посетите нашу ссылку значок
Google Материал Дизайн Иконки
Главная
Главная
меню
меню
arrow_back
arrow_back
arrow_forward
arrow_forward
поиск
поиск
Закрыть
Закрыть
обновление
обновление
Удалить
Удалить
человек
человек
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport
пример

W3.CSS

cloud
cloud
cloud
cloud
cloud
cloud
</body>
</html>
Попробуй сам »
Bootstrap Иконки

Главная

меню гамбургер

arrow_back

arrow_forward

поиск

Удалить

обновление

мусор

пользователь

файл

Распечатать

самолет
пример

W3.CSS







</body>
</html>
Попробуй сам »
Иконки социальных сетей на CSS
В этой статье я расскажу о эксперименте по созданию иконок социальных сетей на CSS. Они созданы не на «чистом CSS3» или «HTML5 canvas». При создании этих иконок используется традиционная техника с фоновым изображением. Цель эксперимента состоит в обеспечении кроссбраузерности, создании последовательного и универсального CSS-кода, который может быть применен в любом дизайне, приложении или теме. В принципе, это набор стилей, который позволяет отображать различные иконки, комбинируя CSS-классы.
Демонстрация
Реализация
Чтобы использовать эти CSS-иконки на вашем сайте, скачайте архив, который включает файл social-buttons.css:
<link rel=»stylesheet» href=»social-buttons.css»>
Вариант A: Вам нужно добавить класс .sb (.sb — social button) и класс иконки (например, Twitter, Facebook, RSS и т.д.) к тегу <a>. Используйте этот вариант, если вы хотите, чтобы каждая кнопка имела свой стиль.
<a href=»#»>Twitter</a>
<a href=»#»>Facebook</a>
Вариант Б: Класс .sb также используется, но только для тега-оболочки, например, для , <div> или <ul>. Класс для иконки (например, Twitter, Facebook, RSS) необходимо прописать для тэга <a>. Используйте этот вариант, если хотите, чтобы кнопки имели один последовательный стиль.

<a href=»#»>Twitter</a>
<a href=»#»>Facebook</a>

<ul>
<li><a href=»#»>Twitter</a></li>
<li><a href=»#»>Facebook</a></li>
</ul>
Доступные классы CSS

Ниже приведен список доступных классов. Вы можете назначить столько классов, сколько хотите. Они очень универсальные. Вы можете смешивать и сочетать стили для получения различных результатов. Например, вы можете установить классы «large blue gradient glossy embossed text thick-border» для одной кнопки. Посмотрите демо-примеры.
Размеры
default = 34px

small = 28px

large = 42px

Цвета
blue

purple

red

green

orange

brown

black

gray

light-gray

light-blue

light-purple

pink

light-green

yellow

Стили
min = минимальные стили, без фона и рамки

flat = без закругленных уголков и теней

circle = круглая кнопка

embossed = тиснение

pressed = нажатая кнопка

thick-border = толстые, строгие границы

no-border = без рамки

no-shadow = без тени

gradient = градиент, применяется при помощи псевдо-класса :after

glossy = глянцевый градиент, применяется при помощи псевдо-класса :before

text = иконка с текстом

Типы иконок
twitter

facebook

heart

linkedin

pinterest

podcast

rss

share_this

star

vimeo

Как добавить свои собственные иконки

Так как социальных сетей слишком много, я включил только некоторые основные классы иконок в демо, чтобы файл стилей не был слишком большим, и сохранил их в файл social-icons.css. Вы можете добавить больше классов иконок с помощью простого кода CSS (не забудьте добавить класс .sb для ссылки <a href=»#»>) :
a.sb.youtube {
background-image: url(images/youtube.png);
}
a.sb.email {
background-image: url(images/email.png);
}
Как переопределить размер кнопки и цвет фона
Вы можете изменить размер кнопки и фон, используя следующий код CSS:
a.sb {
width: 36px;
height: 36px;
background-color: #ссс;
}
Как добавить свой градиент

Градиентный фон применяется при помощи псевдо-элемент :before. Вы можете создавать свои градиенты с помощью Ultimate CSS Gradient Generator.
Обратите внимание, что SVG-градиент необходим для Internet Explorer 9, так как он не поддерживает градиент CSS3.
a.sb.gradient.custom:after {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9I
jEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3
BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ
2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ij
AlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI
wJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rvc
CBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT
0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkd
Gg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSI
gLz4KPC9zdmc+);
background-image: -moz-linear-gradient(top, #b8c6df 0%, #6d88b7 100%);
background-image: -webkit-linear-gradient(top, #b8c6df 0%,#6d88b7 100%);
background-image: linear-gradient(top, #b8c6df 0%,#6d88b7 100%);
}
Как создать свой собственный стиль
Вы также можете переопределить стили по умолчанию в social-icons.css и создать свой собственный стиль. Следующий класс custom переопределяет фоновое изображение.
/* custom icon */
a.sb .custom {
width: 80px;
height: 80px;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
a.sb.custom:after {
background-image: url(images/custom-bg.png);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
/* custom icon blue */
a.sb.custom.blue {
border-color: #96a8af;
}
a.sb.custom.blue:after {
background-image: url(images/custom-bg-blue.png);
}
/* custom icon pink */
a.sb.custom.pink {
border-color: #b0a1aa;
}
a.sb.custom.pink:after {
background-image: url(images/custom-bg-pink.png);
}
/* custom icon background images */
a.sb.custom.retweet {
background-image: url(images/custom-icon-retweet.png);
}
a.sb.custom.photo {
background-image: url(images/custom-icon-photo.png);
}
a.sb.custom.comment {
background-image: url(images/custom-icon-comment.png);
}
Совместимость с браузерами
Основные стили работают в любом браузере. CSS3-эффекты, таких как: закругленные углы, градиент, глянец, эффекты нажатия и тиснения, будут работать в любом браузере, который поддерживает CSS3, таких как Chrome, Firefox, Safari, Opera и IE9.
Бесплатная лицензия
Иконки 100% бесплатные и могут использоваться для любых целей. Вы можете делиться ими и изменять их.
Перевод статьи с webdesignerwall.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Иконки Awesome и CSS
Из этой статьи вы узнаете, как поместить готовую иконку на сайт с помощью иконочного шрифта Font Awesome.
Что такое Font Awesome?
Иконочный шрифт Awesome — это шрифт, содержащий в себе в место букв символы и специальные знаки, которые можно оформлять через CSS по той же аналогии, как делаем мы это с простым шрифтом. То есть, при помощи CSS можем установить цвет, поменять размер, задать тень и другое.
Примеры иконок: …

1. Как подключить шрифт Awesome
Способ подключения 1
Переходим на сайт Font Awesome, и скачиваем архив со шрифтом.
Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки:
это папка css и папка fonts.
Закачиваем их на свой сервер, где расположен ваш_сайт.
Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link>.
Используем полную версию:
<link rel=»stylesheet» href=»http://ваш_сайт/css/font-awesome.css»>
Используем минимизированную версию:
<link rel=»stylesheet» href=»http://ваш_сайт/css/font-awesome.min.css»>
Готово! Теперь вам доступны иконки Awesome.
Способ подключения 2
Чтобы не закачивать библиотеку стилей шрифта Awesome на сервер, где расположен мой сайт, я подключаю стороннюю библиотеку сайта cdnjs.com.
Для подключения использую тег <link> , который прописывается в разделе <head>.
Скопируйте приведенный ниже код на страницу своего сайта.
<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»>
Готово! Теперь вам доступны иконки Awesome.

2. Как вставить иконку Font Awesome на сайт
Вариант 1
По умолчанию иконка добавляется конкретно на страницу html используя пустой тег или тег .
Пример 1
 или 
В результате Примера 1 получили иконку шрифта Awesome fa-tree — ёлочка:
Из примера видно, что
тег обязательно включает атрибут class, который содержит
префикс fa и fa-имя иконки
Пример 2

Результат Примера 2:
Вариант 2
Иконки можно добавить к нужному элементу с помощью псевдоэлементов ::before, ::after и соответствующего значения свойства content.
Для этого используем тег <style>.
Прописанные стили можно перенести в общую каскадную таблицу стилей CSS своего сайта.
Пример 3
<style> .do::before { content: "\f015"; /* добавляем иконку дом */ font-family: FontAwesome; color: red; /* цвет иконки */ font-size: 20px; margin-right: 6px; } </style> Иконка перед текстом это html5
Результат Примера 3: Иконка перед текстом, это html5
Пример 4
<style> .posle::after { content: "\f002"; /* добавляем иконку лупа */ font-family: FontAwesome; color: green; margin-left: 10px; font-size: 18px; /* размер иконки */ } </style> Иконка после текста поиск 
Результат Примера 4: Иконка после текста , Поиск
Bootstrap иконки для сайта (glyphicon)
Приветствую вас, товарищ! Это небольшой гайд по иконкам Bootstrap, а именно GliphIcon. Если кто не знает, то это такие миниатюрные картинки в виде шрифта, которые можно применять в самых различных местах, это кнопки, списки, текст и и очень красиво смотрятся сайты, сделанные на Bootstrap. Тем более, что все это бесплатно, от вас требуются только знания HTML и CSS. Но если вы здесь, то они у вас наверняка уже имеются. Имеется документация на русском языке, и все бы ничего, но есть одна проблема, она очень криво написана, и новичкам трудно что-то разобрать из написанного. В частности речь идет о bootstrap glyphicons. Ну посмотрите сами:
Нам предлагают реализовать Bootstrap стили GliphIcon на странице таким образом:


И когда новоиспеченный вебмастер начинает следовать этим рекомендациям, то у него, конечно же, ничего не получается и начинают серфить интернет в поисках ответа на вопрос, почему же не отображаются иконки Bootstrap. По факту, эта конструкция кода не работает. Но давайте будем действовать по порядку, чтобы в дальнейшем не было путаницы.
Как подключить GlyphIcons
Если вы уже скачали папку Bootstrap, то, как вы знаете, в ней находятся еще 3, это CSS, Fonts и JS. Загружаем ее к себе на сервер. Совершенно не важно в какую директорию вы ее положите, но делайте так, чтобы было логично и понятно. Правильно будет разместить ее в файлах шаблона сайта. Теперь подключаем таблицу:
<link rel="stylesheet" href="/wp-content/themes/MyTheme/bootstrap/css/bootstrap.min.css" type="text/css" media="screen, projection"/>
<link rel=»stylesheet» href=»/wp-content/themes/MyTheme/bootstrap/css/bootstrap.min.css» type=»text/css» media=»screen, projection»/>
Самое главное — это прописать правильный путь. В примере указан относительный, но вы можете указать абсолютный. И этого уже достаточно для того, чтобы иконки Bootstrap GlyphIcons начали отображаться на страницах. Правильным будет вот такое написание:


И вот несколько вариантов исполнения:
Так, как они являются шрифтом, то их легко можно увеличить, задав параметры CSS font-size или поменять цвет:


А если это группа иконок, то лучше будет окружить их блоком DIV и уже ему дать размер шрифта. Иконки Bootstrap 3 замечательно выглядят на кнопках и придают им особый, профессиональный вид, так и хочется по ним клацнуть.
Bootstrap кнопки с иконками GliphIcons
Демо Инструменты Отправить Информация Успех Предупреждение Скачать Ссылка
Код для последней, красной кнопки будет таким:
<button> Скачать</button>
<button> Скачать</button>
Всего иконок Bootstrap GliphIcond 200 штук и этого вполне хватает для множества задач, которые необходимо сделать при создании сайта и пред вами полный список. Добавьте эту страницу в закладки браузера (Ctrl + D), чтобы он был у вас всегда под рукой, когда нужно. Так же рекомендую иконки для Bootstrap 4.

Иконки — CSS Framework — Русская поддержка Invision Community
В IPS4 используется иконочный шрифт, называемый FontAwesome. Он позволяет отображать доступные иконки, не требующие дополнительного HTTP запроса и которые можно стилизовать с помощью CSS (и наследуют стили автоматически), а также их можно масштабировать без потери качества.
Использование
Иконка может быть включена в разметку с помощью использования следующего кода:

Список доступных иконок с их названиями доступен на сайте http://fontawesome.io/icons/. Обратите внимание, что эти названия не начинаются с префикса ips, как и другие классы фреймворка; они используются с оригинальными названиями, как на сайте FontAwesome.
Иконки могут быть использованы везде, где можно использовать HTML код. Например, в тексте, на кнопке, в меню и так далее.
Иконка на кнопке

Постоянность иконок
Важно понимать, что иконка используется постоянно на всё сайте. Это относится и к основным разработчикам, а также к разработчикам приложений. Если различные иконки используются для одинаковых целей (что ещё хуже — иконка используется для других целей, чем должна), пользователи будут путаться программным обеспечением.
Для упрощения понимая, есть список иконок, которые предназначены для выполнения определённых действий в системе. Проверьте этот список на наличие иконки, которую вы хотели выбрать для себя, и, если она уже есть, выберите другую иконку. Названия иконок FontAwesome упоминается в оригинале, то есть без префикса fa-
Добавить
Удалить
Изменить
Вернуть
Перейти куда-либо
Открыть внешнюю ссылку
Подтвердить Да/Нет
Разрешения
Авторизация/Войти
Копировать
Настройки
Отметка ВКЛ/ВЫКЛ
Рейтинг Активный/Неактивный
Разработчик/Приложение
Помощь
Объединить
Код/PHP/HTML
Сообщение/Написать письмо
Поиск
Просмотр
Перезагрузить/Обновить
Выполнить/Начать
Визуальный редактор/Простой режим

Используйте иконку Font Awesome в качестве контента CSS
Обновление для FontAwesome 5 ^{Благодаря Aurelien}
Вам нужно изменить font-familyна Font Awesome 5 BrandsOR Font Awesome 5 Free, основываясь на типе значок , который вы пытаетесь визуализировать. Также не забудьте объявитьfont-weight: 900;
a:before { font-family: "Font Awesome 5 Free"; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; }
демонстрация
Вы можете прочитать остальную часть ответа ниже, чтобы понять, как он работает, и узнать некоторые обходные пути для расстояния между значком и текстом.
FontAwesome 4 и ниже
Это неправильный способ его использования. Откройте потрясающую таблицу стилей шрифта, перейдите к classшрифту, который вы хотите использовать, скажем fa-phone, скопируйте свойство содержимого этого класса вместе с сущностью и используйте его следующим образом:
a:before { font-family: FontAwesome; content: "\f095"; }
демонстрация
Просто убедитесь, что, если вы ищете целевой aтег, рассмотрите возможность использования classвместо него, чтобы сделать его более конкретным, например:
a.class_name:before { font-family: FontAwesome; content: "\f095"; }
При использовании вышеописанного способа значок будет прикреплен к оставшемуся вашему тексту, поэтому, если вы хотите, чтобы между ними было немного свободного пространства, сделайте его display: inline-block;и используйте немного padding-right:
a:before { font-family: FontAwesome; content: "\f095"; display: inline-block; padding-right: 3px; vertical-align: middle; }
Расширяя этот ответ далее, поскольку у многих может возникнуть необходимость изменить значок при наведении, поэтому для этого мы можем написать отдельный селектор и правила для :hoverдействий:
a:hover:before { content: "\f099"; /* Code of the icon you want to change on hover */ }
демонстрация
Теперь в приведенном выше примере значок подталкивает из-за разного размера, и вы, конечно, не хотите этого, поэтому вы можете установить фиксированное widthзначение для базового объявления, например
a:before { /* Other properties here, look in the above code snippets */ width: 12px; /* add some desired width here to prevent nudge */ }
демонстрация
CSS-иконок — GeeksforGeeks
В этой статье мы узнаем, как использовать значки для добавления на HTML-страницу из библиотеки значков. Иконки могут быть добавлены на нашу HTML-страницу из доступной библиотеки иконок. Все значки в библиотеке можно отформатировать с помощью CSS. Их можно настроить в соответствии с размером, цветом, тенью и т. Д. Значок представляет собой графическое представление, которое передает конкретное значение, для которого он используется, и помогает соответствующим образом ориентироваться.
Доступно 3 типа библиотек иконок, а именно
Внимание читатель! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с Web Design for Beginners | Курс HTML .
Font Awesome Icons
Google Icons
Bootstrap Icons
Мы включим необходимую ссылку CDN из доступной библиотеки значков, которая поможет нам использовать предопределенные классы значков или настроить ее с помощью CSS .
Подход: Чтобы использовать значки, нам нужно добавить необходимую ссылку CDN внутри раздела.Чтобы добавить предопределенный класс в HTML, выполните следующие действия:

Добавьте имя класса значка к любому встроенному элементу HTML.
Элементы и широко используются для добавления значков.
Все значки являются масштабируемыми векторными значками, которые можно настроить с помощью необходимых свойств CSS, таких как размер, цвет, тень и т. Д.
Примечание: Все вышеупомянутые библиотеки не требуют загрузки или установки.
Метод 1. Font Awesome Icons
Чтобы использовать Font Awesome Icons, добавьте следующую ссылку в раздел.

Синтаксис:

Мы можем использовать свойство font-size , чтобы сделать значки большого размера для отображения. В приведенном ниже примере показано использование свойства font-size .
Пример 1: В этом примере мы использовали свойство font-size с каждым классом значков &, значение которого установлено на 32 пикселя.
HTML

< html >
< головка >
< ссылка = "таблица стилей"
href =
головка >
< корпус >

h2 > GeeksforGeeks h2 >
 i >
 i >
 i >
 i >
 i >
корпус >
html >
007 Выход:
0
Пример 2: В этом примере мы использовали класс « fa fa-heart », имеющий свойство font-size и свойство цвета , значения которого установлены на 28 пикселей, красный и синий соответственно.
HTML

< html >
< головка >
< ссылка = «таблица стилей» href =
головка >
< корпус >
< h2 > GeeksforGeeks h2 >
 i >
 i >
 i >
 i >
 i >
корпус >
html >
007 Выход:
00
Метод 2: значки Google
Чтобы использовать значки Google, добавьте следующую ссылку в раздел.

Синтаксис:
cloud
Пожалуйста обратитесь к разделу Как использовать значок материала Google как стиль списка на веб-странице с помощью HTML и CSS? статья, чтобы узнать, как использовать свойства CSS с предопределенным классом.
Пример 1: В этом примере мы использовали класс « material-icons » с требуемым значком.
HTML

< html >
< головка >
< ссылка = "таблица стилей" href =
головка >
< корпус >
< h2 > GeekforGeeks h2 >
 облако i >
 избранное i >
 вложение i >
 компьютер i >
 трафик i >
корпус >
html >
Выход:

Пример 2 Например, мы использовали класс « material-icons » с формой облака.
HTML

< html >
< головка >
< ссылка = «таблица стилей» href =
головка >
< корпус >
< h2 > GeekforGeeks h2 >
 облако i >
 облако i >
 облако i >
 облако i >
 облако i >
корпус >
html >
Выход:
Метод 3. Значки начальной загрузки
Чтобы использовать значки начальной загрузки, добавьте следующую ссылку в раздел.

Синтаксис:

Мы можем использовать font-size , чтобы отображать значки большого размера. В приведенном ниже примере показано использование свойства font-size с предопределенным классом.
Пример 1: В этом примере мы использовали свойство font-size с каждым классом глификона, и все значения установлены на разные числа.
HTML

< html >
< головка >
< ссылка = «таблица стилей» href =
головка >
< корпус >
< h2 > GeekforGeeks h2 >
 i >
 i >
 i >
 i >
 i >
корпус >
html >
007 Выход:
00
Пример 2: В этом примере мы использовали класс « glyphicon glyphicon-thumbs-up » с формой большого пальца вверх, и все значения установлены на разные числа.
HTML

< html >
< головка >
< ссылка = «таблица стилей» href =
головка >
< корпус >
< h2 > GeekforGeeks h2 >
 i >
 i >
 i >
 i >
 i >
корпус >
html >
007 Выход:
0
иконок CSS - javatpoint
Иконки можно определить как изображения или символы, используемые в любом компьютерном интерфейсе, относящиеся к элементу.Это графическое представление файла или программы, которое помогает пользователю быстро определить тип файла.
Использование библиотеки значков - это самый простой способ добавить значки на нашу HTML-страницу. Можно отформатировать значки библиотеки с помощью CSS. Мы можем настроить значки в соответствии с их цветом, тенями, размером и т. Д.
Имеются некоторые библиотеки значков, такие как значки Bootstrap, значки Font Awesome, значки и Google , которые можно легко использовать в CSS.Нет необходимости устанавливать или скачивать упомянутые выше библиотеки.
Обсудим уже упомянутые библиотеки иконок.
Font Awesome иконки
Чтобы использовать эту библиотеку на нашей HTML-странице, нам нужно добавить следующую ссылку в раздел .
Давайте разберемся с иллюстрацией.
Пример
Иконки CSS <стиль> тело{ выравнивание текста: центр; цвет фона: светло-голубой; } .fa { красный цвет; размер шрифта: 50 пикселей; маржа: 10 пикселей; }
Библиотека Font Awesome
<я
Проверить это сейчас
Иконки начальной загрузки
Как и в случае с библиотекой font awesome, мы можем добавить значки начальной загрузки на нашу HTML-страницу, используя ссылку, приведенную ниже в разделе .
<ссылка rel = "таблица стилей" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Пример
Иконки CSS <ссылка rel = "таблица стилей" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <стиль> тело{ выравнивание текста: центр; цвет фона: светло-голубой; } .glyphicon { красный цвет; размер шрифта: 50 пикселей; маржа: 10 пикселей; }
Значки начальной загрузки

Проверить это сейчас
Иконки Google
Как и в случае с вышеуказанными библиотеками, мы можем добавить его на нашу HTML-страницу, просто добавив ссылку, приведенную ниже, в раздел .
Пример
Пример
Иконки CSS <стиль> тело{ выравнивание текста: центр; цвет фона: светло-голубой; } .material-icons { красный цвет; размер шрифта: 50 пикселей; маржа: 10 пикселей; }
Значки Google
облако вложение компьютер любимый трафик
Проверить это сейчас
Как использовать и стилизовать значки с помощью чистого CSS: полное руководство
Содержание: ¶
Шаги для начала использования значков
Чтобы использовать значки на своем веб-сайте, вам необходимо выполнить следующие шаги:
Настройка на вашем сайте¶
Скопируйте код, предоставленный сайтом Font Awesome, в каждого шаблона или страницы, где вы хотите использовать значки Font Awesome.
Чтобы использовать последнюю версию font awesome icons, посетите эту страницу.
Здесь мы будем использовать ссылку rel версии 5.8.1, чтобы определить взаимосвязь между текущим документом и связанным файлом:

Загрузка не требуется.
Добавьте значки в пользовательский интерфейс¶
Значки должны быть помещены в элемент.Найдите нужный значок и скопируйте его HTML-код.
Код значка будет выглядеть так:

Стиль значков¶
Можно легко изменить размер и цвет значка, даже добавить к нему тени, используя только CSS. Также возможно перемещение и анимация иконок. Мы рассмотрим все это ниже.
Как использовать Font Awesome Icons¶
Иконки можно разместить практически в любом месте, используя префикс стиля (fa) и имя значка.Font Awesome используется со встроенными элементами, и рекомендуется придерживаться их в проекте с согласованным элементом HTML.
Допускается использование тегов и для добавления значков на веб-страницы. Итак, если вам не нравится, когда сайт предоставляет вам код с тегом , вы можете изменить его на .
Для ссылки на значок вам нужно использовать его имя с префиксом fa- и префиксом, соответствующим вашему предпочтительному стилю (fas, fal, far или fab).
Использование элемента для ссылки на значок будет выглядеть следующим образом:

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

Префикс fa устарел в версии 5. Новый префикс по умолчанию - fas для твердого стиля, стиль fab для брендов, далеко для обычного стиля и fal для легкого стиля.
Пример добавления значков Font Awesome: ¶
Font Awesome Icons Пример значков Камера Автомобиль Конверт
Попробуйте сами »
Как изменить размер шрифта для великолепных значков и придать им цвет
Значки наследуют размер шрифта своего родительского контейнера, чтобы соответствовать любому тексту, который вы можете использовать с ними.Вы можете увеличить или уменьшить размер значков относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, fa-sm, fa-lg, fa-2x и т. Д.
Что касается цвета, его можно установить с помощью Свойство цвета CSS. Вам просто нужно установить значки в элементе
и определить цвет для него в своем стиле или просто задать стиль для элемента .
Пример оформления значков Font Awesome: ¶
Font Awesome Icons <стиль> div { цвет: # 1c87c9; } Пример значков с указанным размером и цветом
Попробуйте сами »
Здесь вы найдете детали шкалы размеров:
Также можно напрямую изменить размер значка, установив размер шрифта во внешнем стиле значка или непосредственно в атрибуте стиля в HTML-элемент, ссылающийся на значок.
Пример установки размера иконок Font Awesome: ¶
Font Awesome Icons я { цвет: # 8ebf42; } .star { размер шрифта: 2em; } Пример значков с размером и цветом шрифта Значок размера по умолчанию. Размер шрифта: 2em;
Попробуйте сами »
Как использовать значки с кнопками¶
Вы также можете добавить эти значки при создании кнопок.Просто вставьте значок в элемент <кнопка> <кнопка>
Иконки кнопок с текстом и разными цветами:
<кнопка> На главную <кнопка> Меню <кнопка> О Попробуйте сами »
Как добавить эффекты тени к значкам¶
Для создания эффектов тени на значках необходимо свойство CSS text-shadow.
Определите тень для элемента, на который ссылается значок, следующим образом:
Пример добавления эффектов тени на значки: ¶
Font Awesome Icons я { цвет: # 1c87c9; тень текста: 2px 2px 4px # 00ffff; размер шрифта: 30 пикселей; } Пример значков с текстовой тенью
Попробуйте сами »
Как использовать отличные шрифтовые значки в списке¶
С помощью значков можно делать потрясающие вещи! Вы можете стилизовать свои списки HTML с помощью значков в виде декоративных маркеров.
Для этой цели используйте класс fa-ul для элемента
и класс fa-li для элемента
, чтобы заменить маркеры по умолчанию в неупорядоченных списках.
Пример использования значков Font Awesome в списке: ¶
Font Awesome Icons охватывать { цвет: # 8ebf42; } Иконки в примере списка Элемент списка 1 Элемент списка 2 Элемент списка 3 Элемент списка 4
Попробуйте сами »
Как анимировать иконки Font Awesome¶
Заставьте значки вращаться и пульсировать, используя класс fa-spin, чтобы значок вращался, и класс fa-pulse, чтобы он вращался с 8 ступенями.Особенно хорошо работает с fa-spinner.
Вот как это должно быть:

Попробуйте пример ниже, чтобы увидеть разницу между классами fa-spin и fa-pulse.
Пример анимации значков Font Awesome: ¶
Font Awesome Icons <стиль> я { цвет: # 1c87c9; тень текста: 2px 2px 4px # 00ffff; размер шрифта: 30 пикселей; } Иконки с классами fa-spin и fa-pulse Вращение спиннера: Spinner Pulse:
Попробуйте сами »
См. другой пример с несколькими анимированными значками.
Пример анимации различных значков: ¶
Font Awesome Icons я { цвет: # 1c87c9; тень текста: 2px 2px 4px # 00ffff; размер шрифта: 30 пикселей; } Иконки с анимацией
Попробуйте сами »
Как повернуть шрифт Awesome Icons¶
Для создания отличного дизайна часто требуется повернуть, перевернуть или отразить значок, поэтому для этого включены некоторые быстрые утилиты.
Для произвольного поворота и отражения значков используйте классы fa-rotate- * и fa-flip- * при ссылке на значок.
Пример поворота значков Font Awesome: ¶
Font Awesome Icons я { цвет: # 1c87c9; тень текста: 2px 2px 4px # 00ffff; размер шрифта: 30 пикселей; } Иконки с вращением
Попробуйте сами »
Здесь вы найдете подробную информацию о величине поворота:
20 бесплатных наборов иконок на чистом CSS
В настоящее время использование тегов img для отображения значков на сайте является ужасной техникой веб-дизайна.Вместо этого все дизайнеры и веб-разработчики начали использовать чистые наборы значков CSS, что гарантирует им, что значки будут отображаться последовательно по всему веб-сайту.
С помощью значков CSS добавлять анимацию очень просто. Анимированные значки CSS помогут вам привлечь внимание посетителей и выделят ваш сайт.
Чтобы помочь вам начать использовать значки CSS в дизайне своего веб-сайта вместо простых изображений, вот 20 бесплатных наборов значков на чистом CSS , которые вы можете загрузить и начать использовать сегодня.
Вот они!
Один ярлык, один значок. Эти чистые иконки CSS не являются шрифтами или SVG. Вы также можете загрузить Icono из CDN.
Cikonss - это чистый CSS, отзывчивый и кросс-браузерный. Использовался CSS2, что привело к ограничению доступных форм (и значков).
Этот набор содержит 84 графических интерфейса пользователя, созданных из семантического HTML. Проверь их!
Это несколько классных значков файлов на чистом CSS, которые помогут вам создавать значки файлов с помощью чистых кодов CSS (например,doc, pdf, png, zip и т. д.).
Эти значки являются адаптивными и анимированными. Также их можно масштабировать до любого размера без потери качества.
Font Awesome предоставляет масштабируемые значки, которые можно настроить до любого необходимого размера, цвета, тени и т. Д. Только с помощью CSS.
Эти значки простые, с линейным дизайном. Они очень эффективны и просты в использовании.
Эти значки представляют собой чистый CSS, без использования изображений.Вы можете легко настроить эти значки из кода CSS.
Этот набор значков представляет собой комбинацию фреймворка Bootstrap и Font Awesome. Их можно настроить с помощью CSS, чтобы изменить цвета, формы и эффекты.
Это набор из более чем 85 значков / глифов, полностью созданных на CSS3, которые вы можете бесплатно использовать в своих проектах.
Вот несколько значков с эффектами ролловера, которые бывают разных стилей, цветов и размеров.Все значки основаны на Font Awesome.
Это несколько экспериментальных иконок социальных сетей, созданных с использованием CSS и семантического HTML. Они используют прогрессивное улучшение без использования изображений или JavaScript.
Вот огромная библиотека значков с 740 значками дизайна материалов, идеально подходящая для проектов веб-дизайна, основанных на материалах.
Шрифт Metro Icon Font предоставляет масштабируемые значки, которые можно мгновенно настроить под любой размер, цвет, тень и т. Д. - и все это с помощью CSS.Он включает более 400 иконок.
IcoMoon - это пакет векторных значков и веб-приложение для создания пользовательских шрифтов значков или спрайтов SVG.
Pictos - это новый набор значков интерфейса, совместимый с фреймворком Redux. Иконки бывают трех видов: Line, Solid и Color.
Вот как эти значки выглядят в поддерживаемых браузерах - Firefox и Webkit.
Эти иконки на чистом CSS были созданы Джошуа Хиббертом.Эти значки сделаны очень хорошо, и вы можете начать использовать их уже сегодня.
Иконки шрифтов легко реализовать, они хорошо поддерживаются и бесконечно масштабируемы. Проверьте это!
Bulma: Бесплатная современная CSS-структура с открытым исходным кодом на основе Flexbox
.
Элемент icon представляет собой контейнер для любого типа шрифта значка .Поскольку загрузка значков может занять несколько секунд, и поскольку вы хотите контролировать пространство , которое будет занимать значков, вы можете использовать класс icon в качестве надежного квадратного контейнера, который предотвратит «скачок» страницы по странице. нагрузка.
HTML

Желтый фон здесь только в демонстрационных целях, чтобы выделить область контейнера значков.
По умолчанию контейнер icon займет ровно 1,5 бэр x 1,5 бэр . Размер самого значка зависит от используемой библиотеки значков. Например, значки Font Awesome 5 унаследуют размера шрифта.
Текст значка #
С 0.9.2
Вы можете комбинировать значок с текстом , используя оболочку icon-text , если весь текст внутри заключен в отдельный элемент span :
HTML
Главная
Вы можете комбинировать столько элементов icon и текстовых элементов, сколько хотите:
Пример
Париж Будапешт Бухарест Стамбул
HTML
Париж Будапешт Бухарест Стамбул
Поскольку icon-text является элементом inline-flex , его можно легко вставить в любой абзац текста .
Пример
Приглашение к обед вскоре был отправлен; и миссис Беннет уже спланировала курсы, которые должны были отдать должное ее ведению домашнего хозяйства, когда пришел ответ, который все отложил. Мистер Бингли был вынужден находиться в город на следующий день и, следовательно, не в силах принять честь своего приглашение , и т.п.
Миссис Беннет очень смутилась. Она не могла представить, какие дела он мог иметь в городе так скоро после его пребытие в Хартфордшире; и она начала бояться, что он может быть всегда летающий перебегал из одного места в другое и так и не поселился в Незерфилде, как следовало бы.
HTML
Приглашение к ужин вскоре был отправлен; и уже была миссисБеннет спланировала курсы, которые должны были отдать должное ее ведению домашнего хозяйства, когда пришел ответ, который все отложил. Мистер Бингли был вынужден находиться в город на следующий день и, следовательно, не в силах принять честь своего приглашение , и т.п. Миссис Беннет очень смутилась. Она не могла представить, какие дела он мог иметь в городе так скоро после его прибытие в Хартфордшире; и она начала бояться, что он может быть всегда летающий перебегал из одного места в другое и так и не поселился в Незерфилде, как следовало бы.
Вы также можете превратить icon-text в элемент flex , просто используя вместо него тег
:
Пример
Информация
Ваша посылка будет доставлена вторник в 08:00 .
Успех
Ваше изображение было успешно загружено.
Предупреждение
Некоторая информация отсутствует в данных вашего профиля.
Опасность
В вашей заявке была ошибка. Пожалуйста, попробуйте еще раз.
HTML
Информация Ваша посылка будет доставлена во вторник в 08:00 . Успех Ваше изображение было успешно загружено. Предупреждение Некоторая информация отсутствует в данных вашего профиля . Опасность В вашей заявке была ошибка. Повторите попытку .
Цвета #
Так как шрифты значков - это просто текста , вы можете использовать помощники цвета, чтобы изменить цвет значка.
HTML

То же самое относится и к текстовому значку :
Пример
Информация Успех Предупреждение Опасность
HTML
Информация Успех Предупреждение Опасность
Размеры #
Контейнер Bulma icon поставляется в 4 размерах .Он всегда должен быть немного больше , чем значок, который он содержит. Например, значки Font Awesome 5 по умолчанию используют размер шрифта 1em (поскольку он наследует размер шрифта), но предоставляет дополнительные размеры.
Контейнерный класс Размер контейнера Font Awesome 5 класс Размер иконок Результат
иконка маленькая 1 бэр x 1 бэр fas 1em
значок 1.5 бэр x 1,5 бэр fas 1em
FAS FA-LG 1,33em
значок средний 2 бэр x 2 бэр fas 1em
FAS FA-LG 1.33em
fas fa-2x 2em
значок большой 3 бэр x 3 бэр fas 1em
FAS FA-LG 1.33em
fas fa-2x 2em
Font Awesome вариации #
Font Awesome также предоставляет классы модификаторов для:
значки фиксированной ширины
обрамленные иконы
анимированные иконки
сложенные значки
Тип Font Awesome class Результат
Фиксированная ширина fas fa-fw
Граничит fas fa-border
Анимированные fas fa-spinner fa-pulse
Сложены

Иконки Материального Дизайна #
Вот как контейнер icon можно использовать с иконками Material Design.
Контейнерный класс Размер контейнера Класс MDI Размер иконок Результат
иконка маленькая 1 бэр x 1 бэр MDI 1em
значок 1.5 бэр x 1,5 бэр МДИ МДИ-18px 18px
mdi mdi-24px 24px
значок средний 2 бэр x 2 бэр MDI 1em
МДИ МДИ-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
значок большой 3 бэр x 3 бэр MDI 1em
МДИ МДИ-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
mdi mdi-48px 48px
MDI также предоставляет классы-модификаторы для:
светлые и темные иконы
повернутые и перевернутые значки
Тип Material Design Icon класс Результат
Светлый цвет MDI MDI-светильник
Темный цвет mdi mdi-темный
Светлый неактивный цвет mdi mdi-light mdi-неактивный
Темный неактивный цвет mdi mdi-dark mdi-неактивный
Перевернутый mdi mdi-flip-h
МДИ МДИ-Флип-В

Повернутый МДИ МДИ-поворот-45
mdi mdi-поворот-90
mdi mdi-поворот-180

Иониконы #
Вот как контейнер icon можно использовать с Ionicon.
Контейнерный класс Размер контейнера Ionicon класс Размер иконок Результат
иконка маленькая 1 бэр x 1 бэр ионно-ионный 1em
значок 1.5 бэр x 1,5 бэр ионно-ионный 1em
значок средний 2 бэр x 2 бэр ионно-ионный 1em
значок большой 3 бэр x 3 бэр ионно-ионный 1em
Переменные #
Имя
Тип
Ценить
Расчетное значение
Вычисляемый тип
иконок CSS - TutorialBrain
Главная »CSS» Иконки CSS
изображение phone_iphone график гарнитура
Есть 2 способа добавить значки -
Добавить стороннюю библиотеку значков, например Font Awesome, Bootstrap Icons или Google Icons.
Загрузите значки на свой веб-сайт от сторонних поставщиков, таких как Font Awesome, Bootstrap Icons или Google Icons, и используйте их на своем веб-сайте.
Создавайте собственные иконки и добавляйте их прямо на свой сайт.
Первый вариант - лучший и самый простой способ добавления значков.
Второй вариант - тоже хороший вариант, но он делает ваш сайт немного тяжелым.
Третий вариант рекомендуется только в том случае, если вы хотите использовать свои собственные значки.
Font Awesome Icons - самые популярные иконки.
Если вы хотите использовать Font Awesome Icons, лучший способ - включить внешний CSS-файл Font Awesome Icons в раздел вашего HTML-документа.
В приведенном ниже примере мы должны установить некоторые стили для значков, например font-size (для увеличения размера значка), поле (для создания пространства вокруг значков) и т. Д., И это необязательно.
Синтаксис для включения значков Font Awesome Icons:

Синтаксис для использования класса определенного значка Font Awesome:

Например:
Чтобы включить значок списка, вы следует использовать -

Пример CSS Font Awesome Icons
<заголовок> <стиль> # icon1 { размер шрифта: 50 пикселей; маржа: 10 пикселей; } # icon2 { размер шрифта: 50 пикселей; маржа: 10 пикселей; цвет: малиновый; } # icon3 { размер шрифта: 50 пикселей; фон: черный; отступ: 5 пикселей; маржа: 10 пикселей; цвет: голубой; } h5 {font-family: georgia;}
Font Awesome Social Media Icons
Давайте использовать Font Awesome Icons для использования значков социальных сетей, таких как Facebook, Twitter, Pinterest и т. Д.
Пример шрифта Awesome Social Media Icons
Значок Instagram
Значок Facebook
Официальный значок Facebook
Значок Twitter
квадратный значок Twitter
Значок YouTube
Значок YouTube Play
Квадратный значок YouTube
Значок WhatsApp
Значок LinkedIn
Квадратный значок LinkedIn
Значок Pinterest
Значок Pinterest P
Квадратный значок Pinterest
Значок Skype
Примечание / информация / успех Чтобы изменить размер значков, вы можете:
a) Используйте свойства CSS, такие как размер шрифта.В приведенных выше примерах используется это свойство.
b) Используйте встроенные классы, если Font Awesome Icons обсуждается ниже - × Закрыть оповещение
Используйте эти встроенные классы значков Font Awesome для изменения размера значков -
fa-xs - Уменьшает размер значка относительно его контейнера. xs означает Extra small .
fa-sm - Уменьшает размер значка относительно его контейнера. sm означает small .
fa-lg - Увеличить размер значка на 33% относительно его контейнера. LG означает большой.
fa-2x - Увеличить размер значка в 2 раза.
fa-3x - Увеличить размер значка в 3 раза.
fa-4x - Увеличить размер значка в 4 раза.
fa-5x - Увеличить размер значка в 5 раз.
Точно так же вы можете кодировать fa-6x , fa-7x , fa-8x и т. Д.
Font Awesome 4 использует префикс fa , а Font Awesome 5 использует префикс fas .
Пример различных типов значков списка со встроенными размерами шрифта.
Значок списка
Значок упорядоченного списка
Значок неупорядоченного списка
Значок alt списка
Если вы хотите использовать значки начальной загрузки, лучше всего включить внешний файл CSS значков начальной загрузки в раздел вашего HTML-документа.
Синтаксис для включения значков начальной загрузки:

Пример значков начальной загрузки
Значок главного экрана
Значок телефона
Значок "Музыка"
Значок корзины
Значок книги
Значок камеры
Поле поиска CSS с иконками начальной загрузки
Окно поиска - хороший вариант для пользователя, чтобы искать определенный контент, элемент или продукт.
Значок поиска увеличивает его ценность.
Давайте посмотрим, как мы можем это создать.
Пример окна поиска со значками начальной загрузки
<заголовок> <стиль> .поисковая строка { ширина: 200 пикселей; положение: относительное; слева: 20 пикселей; } .searchtext { отступ: 15 пикселей; высота: 20 пикселей; радиус границы: 5 пикселей; наброски: нет; плыть налево; ширина: 100%; граница: 3px сплошной малиновый; } .search-btn { позиция: абсолютная; вправо: -30 пикселей; ширина: 40 пикселей; высота: 36 пикселей; граница: сплошная малиновая 1px; фон: малиновый; выравнивание текста: центр; цвет: #fff; радиус границы: 5 пикселей; курсор: указатель; размер шрифта: 18 пикселей; }
значков Google основаны на материальном дизайне Google. Это самая известная библиотека иконок материалов.
Синтаксис CSS Значки шрифтов Google:
фон: linear-gradient (вверху слева, цветовые точки, разделенные запятыми) ;
Пример CSS Значков шрифтов Google
android значок Android
книга Значок книги
удалить значок удаления
главная значок главного экрана
шкала времени Значок шкалы времени
Другой важный фреймворк с использованием материального дизайна Google
Существует отличный современный адаптивный CSS Framework, основанный на Material Design от Google.Эта структура называется Materialise CSS .
Мы не собираемся здесь обсуждать Materialize CSS , но если вы хотите подробно изучить этот фреймворк, официальный сайт Materialise CSS находится здесь.
Поле поиска CSS с иконками
Мы собираемся увидеть окно поиска с использованием значков Font Awesome и Google.
Вы можете использовать любой из них -
Пример окна поиска со значками
<заголовок> <стиль> .поисковая строка { ширина: 200 пикселей; положение: относительное; } .searchtext { отступ: 5 пикселей; высота: 20 пикселей; радиус границы: 5 пикселей; наброски: нет; плыть налево; ширина: 100%; граница: 3px сплошной малиновый; } .search-btn { позиция: абсолютная; вправо: -50 пикселей; ширина: 40 пикселей; высота: 36 пикселей; граница: сплошная малиновая 1px; фон: малиновый; выравнивание текста: центр; цвет: #fff; радиус границы: 5 пикселей; курсор: указатель; размер шрифта: 18 пикселей; }
CSS-иконок
Самый простой способ добавить значок на вашу HTML-страницу - использовать библиотеку значков, например Font Awesome.
Добавьте имя указанного класса значка к любому встроенному элементу HTML (например, или).
Все значки в библиотеках значков ниже являются масштабируемыми векторами, которые можно настроить с помощью CSS (размер, цвет, тень и т. Д.)
Чтобы использовать значки Font Awesome, добавьте следующую строку в раздел
своей HTML-страницы:
Примечание: загрузка или установка не требуется!
Пример

<я >

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

<я >

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

Категории: Разное