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

Содержание

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

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

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

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

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

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как 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>
Попробуйте сами!

Использование иконок 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 <I> элемента.

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

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

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


фа фа-домой


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


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


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


фа фа-поиска


фа фа-близко


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


фа фа-трэш


фа фа-самец


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


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


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

пример



W3.CSS


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

<i></i>
<i style=»font-size:64px»></i>

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


<i>cloud</i>
<i>cloud</i>
<i >cloud</i>
<i>cloud</i>
<i>cloud</i>
<i >cloud</i>

</body>
</html>

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

Bootstrap Иконки


Главная


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


arrow_back


arrow_forward



поиск


Удалить


обновление


мусор



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


файл


Распечатать


самолет

пример



W3.CSS


<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i style=»font-size:64px»></i>

</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 также используется, но только для тега-оболочки, например, для <p>, <div> или <ul>. Класс для иконки (например, Twitter, Facebook, RSS) необходимо прописать для тэга <a>. Используйте этот вариант, если хотите, чтобы кнопки имели один последовательный стиль.

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

<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 используя пустой тег <i> или тег <span>.

Пример 1

<i><i> или <span><span>

В результате Примера 1 получили иконку шрифта Awesome fa-tree — ёлочка:

Из примера видно, что

тег <i> обязательно включает атрибут class, который содержит
префикс fa и fa-имя иконки

Пример 2

<b><i><i><b>

Результат Примера 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>

<b>Иконка перед текстом</b>
<span></span> это html5

Результат Примера 3: Иконка перед текстом, это html5

Пример 4

<style>
.posle::after {
content: "\f002"; /* добавляем иконку лупа */
font-family: FontAwesome;
color: green;
margin-left: 10px;
font-size: 18px; /* размер иконки */
}
</style>

<b>Иконка после текста</b>

<span>поиск</span> <i></i>

Результат Примера 4: Иконка после текста ,  Поиск

Bootstrap иконки для сайта (glyphicon)

Приветствую вас, товарищ! Это небольшой гайд по иконкам Bootstrap, а именно GliphIcon. Если кто не знает, то это такие миниатюрные картинки в виде шрифта, которые можно применять в самых различных местах, это кнопки, списки, текст и и очень красиво смотрятся сайты, сделанные на Bootstrap. Тем более, что все это бесплатно, от вас требуются только знания HTML и CSS. Но если вы здесь, то они у вас наверняка уже имеются. Имеется документация на русском языке, и все бы ничего, но есть одна проблема, она очень криво написана, и новичкам трудно что-то разобрать из написанного. В частности речь идет о bootstrap glyphicons. Ну посмотрите сами:

Нам предлагают реализовать Bootstrap стили GliphIcon на странице таким образом:

<i></i>

<i></i>

И когда новоиспеченный вебмастер начинает следовать этим рекомендациям, то у него, конечно же, ничего не получается и начинают серфить интернет в поисках ответа на вопрос, почему же не отображаются иконки 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 начали отображаться на страницах. Правильным будет вот такое написание:

<i></i>

<i></i>

И вот несколько вариантов исполнения:

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

<i></i>

<i></i>

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

Bootstrap кнопки с иконками GliphIcons

Демо Инструменты Отправить Информация Успех Предупреждение Скачать Ссылка

Код для последней, красной кнопки будет таким:

<button><i></i> Скачать</button>

<button><i></i> Скачать</button>

Всего иконок Bootstrap GliphIcond 200 штук и этого вполне хватает для множества задач, которые необходимо сделать при создании сайта и пред вами полный список. Добавьте эту страницу в закладки браузера (Ctrl + D), чтобы он был у вас всегда под рукой, когда нужно. Так же рекомендую иконки для Bootstrap 4.


Иконки — CSS Framework — Русская поддержка Invision Community

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

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

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

<i></i>

Список доступных иконок с их названиями доступен на сайте 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 class = "fa fa-cloud" style = "font- size: 32px; " > i >

< i class = "fa fa-heart" style = "font-size: 32px; " > i >

< i class = "fa fa-file" style = "font-size: 32px; " > i >

< i class = "fa fa-car" style = "font-size: 32px; " > i >

< i class = "fa fa-bars" style = "font-size: 32px; " > i >

корпус >

html >

007 Выход:

0

Пример 2: В этом примере мы использовали класс « fa fa-heart », имеющий свойство font-size и свойство цвета , значения которого установлены на 28 пикселей, красный и синий соответственно.

HTML

< html >

< головка >

< ссылка = «таблица стилей» href =

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< i class = "fa fa-heart" style = "font-size: 28px; красный цвет;" > i >

< i class = "fa fa-heart" style = "font-size: 30px; цвет синий;" > i >

< i class = "fa fa-heart" style = "font-size: 32px; красный цвет;" > i >

< i class = "fa fa-heart" style = "font-size: 34px; цвет синий;" > i >

< i class = "fa fa-heart" style = "font-size: 36px; красный цвет;" > i >

корпус >

html >

007 Выход:

00

Метод 2: значки Google

Чтобы использовать значки Google, добавьте следующую ссылку в раздел .

  

Синтаксис:

  cloud  

Пожалуйста обратитесь к разделу Как использовать значок материала Google как стиль списка на веб-странице с помощью HTML и CSS? статья, чтобы узнать, как использовать свойства CSS с предопределенным классом.

Пример 1: В этом примере мы использовали класс « material-icons » с требуемым значком.

HTML

< html >

< головка >

< ссылка = "таблица стилей" href =

головка >

< корпус >

< h2 > GeekforGeeks h2 >

< i класс = «значки материалов» > облако i >

< i class = «значки материалов» > избранное i >

< i класс = «значки материалов» > вложение i >

< i класс = «значки материалов» > компьютер i >

< i класс = «значки материалов» > трафик i >

корпус >

html >

Выход:


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

HTML

< html >

< головка >

< ссылка = «таблица стилей» href =

головка >

< корпус >

< h2 > GeekforGeeks h2 >

< i класс = «значки материалов» стиль = «размер шрифта: 30 пикселей;» > облако i >

< i класс = "значки материалов" стиль = "размер шрифта: 40 пикселей; " > облако i >

< i класс = "значки материалов" стиль = "размер шрифта: 50 пикселей; " > облако i >

< i класс = "значки материалов" стиль = "размер шрифта: 60 ​​пикселей; " > облако i >

< i класс = "значки материалов" стиль = "размер шрифта: 70 пикселей; " > облако i >

корпус >

html >

Выход:

Метод 3. Значки начальной загрузки

Чтобы использовать значки начальной загрузки, добавьте следующую ссылку в раздел .

  

Синтаксис:

   

Мы можем использовать font-size , чтобы отображать значки большого размера. В приведенном ниже примере показано использование свойства font-size с предопределенным классом.

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

HTML

< html >

< головка >

< ссылка = «таблица стилей» href =

головка >

< корпус >

< h2 > GeekforGeeks h2 >

< i class = "глификон глификон-облако" стиль = "размер шрифта: 28 пикселей; " > i >

< i class = "glyphicon glyphicon-user" style = "font-size: 30px; " > i >

< i class = «glyphicon glyphicon-thumbs-up» style = "font-size: 32px; " > i >

< i class = "glyphicon glyphicon-remove" style = "font-size: 34px; " > i >

< i class = "глификон глификон-конверт" стиль = "размер шрифта: 36 пикселей; " > i >

корпус >

html >

007 Выход:

00

Пример 2: В этом примере мы использовали класс « glyphicon glyphicon-thumbs-up » с формой большого пальца вверх, и все значения установлены на разные числа.

HTML

< html >

< головка >

< ссылка = «таблица стилей» href =

головка >

< корпус >

< h2 > GeekforGeeks h2 >

< i class = «glyphicon glyphicon-thumbs-up» style = »font-size: 20px; " > i >

< i class = «glyphicon glyphicon-thumbs-up» style = »font-size: 30px; " > i >

< i class = «glyphicon glyphicon-thumbs-up» style = "font-size: 40px; " > i >

< i class = «glyphicon glyphicon-thumbs-up» style = »font-size: 50px; " > i >

< i class = «glyphicon glyphicon-thumbs-up» style = »font-size: 60px; " > 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 способа добавить значки -

    1. Добавить стороннюю библиотеку значков, например Font Awesome, Bootstrap Icons или Google Icons.
    2. Загрузите значки на свой веб-сайт от сторонних поставщиков, таких как Font Awesome, Bootstrap Icons или Google Icons, и используйте их на своем веб-сайте.
    3. Создавайте собственные иконки и добавляйте их прямо на свой сайт.

    Первый вариант - лучший и самый простой способ добавления значков.

    Второй вариант - тоже хороший вариант, но он делает ваш сайт немного тяжелым.

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

    Font Awesome Icons - самые популярные иконки.

    Если вы хотите использовать Font Awesome Icons, лучший способ - включить внешний CSS-файл Font Awesome Icons в раздел вашего HTML-документа.

    В приведенном ниже примере мы должны установить некоторые стили для значков, например font-size (для увеличения размера значка), поле (для создания пространства вокруг значков) и т. Д., И это необязательно.

    Синтаксис для включения значков Font Awesome Icons:

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

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

    Пример CSS Font Awesome Icons

     <заголовок>
      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 для изменения размера значков -

    1. fa-xs - Уменьшает размер значка относительно его контейнера. xs означает Extra small .
    2. fa-sm - Уменьшает размер значка относительно его контейнера. sm означает small .
    3. fa-lg - Увеличить размер значка на 33% относительно его контейнера. LG означает большой.
    4. fa-2x - Увеличить размер значка в 2 раза.
    5. fa-3x - Увеличить размер значка в 3 раза.
    6. fa-4x - Увеличить размер значка в 4 раза.
    7. 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-страницы:

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

    Пример




    Категории: Разное
Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.