Как изменить размер иконки html - Исправление ошибок и поиск оптимальных решений проблем

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

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

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

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

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

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

<i class="fa fa-play"></i>

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

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

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

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

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

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

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

Цвета

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
 </head>
 <body>
  <p><i class="fa fa-plane fa-2x"></i></p>
  <p><i class="fa fa-plane fa-rotate-90 fa-2x"></i></p>
  <p><i class="fa fa-plane fa-flip-horizontal fa-2x"></i></p>
 </body>
</html>

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

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

Анимация

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

<p><i class="fa fa-futbol-o fa-spin fa-2x"></i></p>

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

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

<div class="fa-stack">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</div>

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<span class="fas fa-camera"></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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <h2>Пример иконок</h2>
    <p>Камера</p>
    <i class="fas fa-camera"></i>
    <p>Машина</p>
    <i class="fas fa-car"></i> 
    <p>Конверт</p>
    <i class="fas fa-envelope"></i>
  </body>
</html>

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span class=»attribute»>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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      div {
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример иконок с указанными размерами и цветами</h2>
    <div>
      <i class="fas fa-camera fa-xs"></i>
      <i class="fas fa-camera fa-sm"></i>
      <i class="fas fa-camera fa-lg"></i>
      <i class="fas fa-camera fa-2x"></i>
      <i class="fas fa-camera fa-3x"></i>
      <i class="fas fa-camera fa-5x"></i>
      <i class="fas fa-camera fa-7x"></i>
      <i class="fas fa-camera fa-10x"></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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      i {
      color: #8ebf42;
      }
      .star {
      font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h2>Пример иконок с установленными размерами шрифта и цвета</h2>
    <div>
      <p>Иконка с размером по умолчанию.</p>
      <i class="fas fa-star"></i>
      <p>Font-size: 2em;</p>
      <i class="fas fa-star star"></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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+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>
    <h2>Кнопки с иконками</h2>
    <p>Icon buttons:</p>
    <button class="btn">
    <i class="fa fa-home"></i>
    </button>
    <button class="btn">
    <i class="fa fa-bars"></i>
    </button>
    <button class="btn">
    <i class="fas fa-info-circle"></i>
    </button>
    <p>Кнопки с иконками текстов и разными цветами:</p>
    <button class="home">
    <i class="fa fa-home"></i> Home
    </button>
    <button class="menu">
    <i class="fa fa-bars"></i> Menu
    </button>
    <button class="about">
    <i class="fas fa-info-circle"></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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Пример иконок с тенью текста</h2>
    <div> 
      <i class="fas fa-apple-alt"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-star-half-alt"></i>
      <i class="far fa-smile"></i>
      <i class="fas fa-paw"></i>
      <i class="fas fa-globe-asia"></i>
    </div>
  </body>
</html>

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

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

Пример

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

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.

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

<i class="fas fa-spinner fa-spin"></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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Иконки с классами fa-spin и fa-pulse</h2>
    <p>Spinner spin:</p>
    <i class="fas fa-spinner fa-spin"></i>
    <p>Spinner pulse:</p>
    <i class="fas fa-spinner fa-pulse"></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+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Анимированные иконки</h2>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-star fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-haykal fa-spin"></i>
    <i class="fas fa-stroopwafel fa-pulse"></i>
    <i class="fas fa-car fa-spin"></i>
  </body>
</html>

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

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

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Поворот иконок</h2>
    <i class="fas fa-star-half-alt"></i>
    <i class="fas fa-star-half-alt fa-rotate-90"></i>
    <i class="fas fa-star-half-alt fa-rotate-180"></i>
    <i class="fas fa-star-half-alt fa-rotate-270"></i>
    <i class="fas fa-star-half-alt fa-flip-horizontal"></i>
    <i class="fas fa-star-half-alt fa-flip-vertical"></i>
    <i class="fas fa-star-half-alt fa-flip-both"></i>
  </body>
</html>

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

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

The <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages, it need the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon’s name.

fontawesome link:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Note: No downloading or installation is required.

Example 1: This example set the size, color and shadow of icon using CSS.

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<link rel="stylesheet" href=

<style>

h1 {

color: Green;

text-shadow: 2px 3px 6px lime;

}

.icons {

color: red;

}

i {

text-shadow: 2px 4px 6px orange;

}

.fa{

font-size: 50px;

}

</style>

</head>

<body style = "text-align:center;">

<div class = "icons">

<h1>GeeksforGeeks</h1>

<i class="fa fa-cloud"></i>

<i class="fa fa-car"></i>

<i class="fa fa-road"></i>

<i class="fa fa-fire"></i>

<i class="fa fa-bolt"></i>

<i class="fa fa-apple"></i>

<i class="fa fa-ambulance"></i>

</div>

</body>

</html>

Output:

Example:2 This example makes the icons spin and pulse by using fa-spin after the name of the icon.

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<link rel="stylesheet" href=

<style>

h1 {

color: Green;

text-shadow: 2px 3px 6px lime;

}

.icons {

color: green;

width: 500px;

height: 200px;

border: 5px solid green;

}

i {

text-shadow:2px 4px 6px cyan;

}

.fa {

font-size:50px;

}

.fa-apple, .fa-car {

font-size:80px;

}

</style>

</head>

<body style = "text-align:center;">

<div class = "icons">

<h1>GeeksforGeeks</h1>

<i class="fa fa-spinner fa-pulse"></i>

<i class="fa fa-car"></i>

<i class="fa fa-road"></i>

<i class="fa fa-fire"></i>

<i class="fa fa-bolt"></i>

<i class="fa fa-apple"></i>

<i class="fa fa-star fa-spin"></i>

</div>

</body>

</html>

Output:

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

fontawesome link:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

Note: No downloading or installation is required.

Example 1: This example set the size, color and shadow of icon using CSS.

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<link rel="stylesheet" href=

<style>

h1 {

color: Green;

text-shadow: 2px 3px 6px lime;

}

.icons {

color: red;

}

i {

text-shadow: 2px 4px 6px orange;

}

.fa{

font-size: 50px;

}

</style>

</head>

<body style = "text-align:center;">

<div class = "icons">

<h1>GeeksforGeeks</h1>

<i class="fa fa-cloud"></i>

<i class="fa fa-car"></i>

<i class="fa fa-road"></i>

<i class="fa fa-fire"></i>

<i class="fa fa-bolt"></i>

<i class="fa fa-apple"></i>

<i class="fa fa-ambulance"></i>

</div>

</body>

</html>

Output:

Example:2 This example makes the icons spin and pulse by using fa-spin after the name of the icon.

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<link rel="stylesheet" href=

<style>

h1 {

color: Green;

text-shadow: 2px 3px 6px lime;

}

.icons {

color: green;

width: 500px;

height: 200px;

border: 5px solid green;

}

i {

text-shadow:2px 4px 6px cyan;

}

.fa {

font-size:50px;

}

.fa-apple, .fa-car {

font-size:80px;

}

</style>

</head>

<body style = "text-align:center;">

<div class = "icons">

<h1>GeeksforGeeks</h1>

<i class="fa fa-spinner fa-pulse"></i>

<i class="fa fa-car"></i>

<i class="fa fa-road"></i>

<i class="fa fa-fire"></i>

<i class="fa fa-bolt"></i>

<i class="fa fa-apple"></i>

<i class="fa fa-star fa-spin"></i>

</div>

</body>

</html>

Output:

Источник

This tutorial covers Bootstrap icon styles resize changing color size border square and circle styles with examples.

In this tutorial, Learn how to style bootstrap icons

How to Resize Bootstrap Icons in CSS and HTML?

To resize web fonts, use the CSS ‘font-size’ attribute.

font-size can be added in style tag in html or apply css selector to add the styles.

Following are icons resized

used code

<div>
      <i class="bi bi-facebook" style="font-size: 30px"></i>
      <i class="bi bi-github" style="font-size: 30px"></i>
      <i class="bi bi-twitter" style="font-size: 30px"></i>
      <i class="bi bi-google" style="font-size: 30px"></i>
      <i class="bi bi-instagram" style="font-size: 30px"></i>
    </div>

For SVG icons, use height and width.
Here is an svg code for resize SVG icon

<div>
 <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-facebook"
        viewBox="0 0 16 16"
      >
        <path
          d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"  />
      </svg>
      </div>

Change width=“32” and height=“32” to SVG tag in html.

Another way, Resize styles applied using css selector

svg.bi bi-facebook{
       height: 64px !important;
    width: 64px !important;

}

How to style the color, size and shadow Bootstrap icons?

It is easy to change color size, shadow and any other styles similar to fonts.

here is inline styles for changing icon color

<div>
      <i class="bi bi-facebook " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-github " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-twitter " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-google " style="font-size: 30px;color: green;"></i>
      <i class="bi bi-instagram " style="font-size: 30px;color: green;"></i>
</div>

The icons displayed in browser are

Another way using css selector,

green class selector is declared in css file

.green {
  color: green;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 2.5em;
}

HTML

<div>
      <i class="bi bi-facebook green"></i>
      <i class="bi bi-github green"></i>
      <i class="bi bi-twitter green"></i>
      <i class="bi bi-google green"></i>
      <i class="bi bi-instagram green"></i>
</div>

How to make icon hyperlinks in html

Adding icon with hyperlinks is very easy.
Just wrap icon tag inside anchor links

Here is example code icons link

<div>
      <a href="#"> <i class="bi bi-facebook blue" ></i></a>
      <a href="#"> <i class="bi bi-github blue" ></i></a>
      <a href="#"> <i class="bi bi-twitter blue" ></i></a>
      <a href="#"> <i class="bi bi-google blue" ></i></a>
      <a href="#"> <i class="bi bi-instagram green" ></i></a>
</div>

You can use span without anchor links which can attach click handlers in javascript.

<div>
      <span class="link"> <i class="bi bi-facebook blue" ></i></span>
      <span class="link"> <i class="bi bi-github blue" ></i></span>
      <span class="link"> <i class="bi bi-twitter blue" ></i></span>
       <span class="link"> <i class="bi bi-google blue" ></i></span>
      <span class="link">  <i class="bi bi-instagram green" ></i></span>
</div>

CSS to apply span with cursor hand

.link {
     cursor: pointer;
}

How to make rounded circle bootstrap icons in HTML?

Here is icon html code to display circle icons

HTML:

<div>
      <i class="bi bi-facebook"></i>
      <i class="bi bi-github"></i>
      <i class="bi bi-twitter"></i>
      <i class="bi bi-google"></i>
      <i class="bi bi-instagram"></i>
</div>

you can use below css to apply icon tag
CSS:

i.bi {
  display: inline-block;
  border-radius: 50px;
  box-shadow: 0px 0px 2px #6b6b6b;
  padding: 0.2em 0.3em;
}

Displayed Output:

How to make square icons in Bootstrap ?

Here is icon html code to display square icons

HTML:

<div>
      <i class="bi bi-facebook"></i>
      <i class="bi bi-github"></i>
      <i class="bi bi-twitter"></i>
      <i class="bi bi-google"></i>
      <i class="bi bi-instagram"></i>
</div>

Here is an CSS code
CSS:

i.bi {
 display: inline-block;
         border-radius: 10px 10px;
         box-shadow: 0px 0px 2px #6b6b6b;
         padding: 0.2em 0.3em;
}

Displayed Output:

You can also below styles to bootstrap icons with css

bi icon border
Pull bi icon To the left
animate bootstrap icon
rotate icon

Источник

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

Цвета

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

Анимация

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

Пример

Пример

Пример

Пример

Пример

Пример

Пример

Пример

Пример

How to Resize Bootstrap Icons in CSS and HTML?

How to style the color, size and shadow Bootstrap icons?

How to make icon hyperlinks in html

How to make rounded circle bootstrap icons in HTML?

How to make square icons in Bootstrap ?

Читайте также: