Changing Width of Font Awesome Icons
I’m not trying to make it fa-2x or fa-3x . I’m trying to scale it so that the width is, say 150%, while the height is still 100%.
3 Answers 3
Really easy using scale
This answer only works when you are trying to adjust the icons in the list. But I am posting this because I guess some people visiting this page is in this situation.
If you are so applying «fa-fw» class to icons solves the problems.
Example from docs.
At first I was also worried that how to change the size of icons of font awesome, I tried lots of method even I tried to add some classes that individually increase or decrease the size of icon.. but nothing worked as it supposed to .. but then I found some classes which was already defined by font awesome to play with size of icons .and here are the list of some classes..
now enjoy with your icon ..goodluck
-
The Overflow Blog
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.11.43304
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Sizing Icons
We have a number of options for sizing icons in your project. So much so, even Goldilocks would be happy.
We’ll cover the basics of industry standard sizing recommendations, and how you can size icons up when it’s useful, or when text alignment is not a concern.
Before You Get Started
Make sure you’re:
-
in your project.
- Familiar with the basics of adding Font Awesome icons.
By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them. In addition to that, Font Awesome comes with the following sizing tools.
Font Awesome includes a range of t-shirt based sizes that not only increase or decrease an icon’s size, but also help vertically align an icon with surrounding text and elements (e.g. button padding). This is great for increasing/decreasing an icon’s size while maintaining legibility and alignment alongside UI elements.
Like Font Awesome’s icons, the relative sizing scale is created with modern browsers’ default 16px font-size in mind and creates steps up/down from there.
| Relative Sizing Class | Font Size | Equivalent in Pixels |
|---|---|---|
| fa-2xs | 0.625em | 10px |
| fa-xs | 0.75em | 12px |
| fa-sm | 0.875em | 14px |
| fa-lg | 1.25em | 20px |
| fa-xl | 1.5em | 24px |
| fa-2xl | 2em | 32px |
Sizing on the Smaller Side
Font Awesome’s icons are designed to render crisply at the equivalent of 16px . While we provide utilities to decrease their size, it’s industry and our best practice to avoid rendering important UI symbols at very small sizes as they are tougher to read and understand.
Font Awesome also includes a literal size scale to make increasing an icon’s size from 1x to 10x easy and efficient. Literal sizing is useful for sizing icons at a larger scale or in cases where text alignment isn’t a primary concern.
When text alignment and sizing icons is important to your design, you’ve got options for that, too.
| Literal Sizing Class | Font Size |
|---|---|
| fa-1x | 1em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
You can also directly style an icon’s size by setting a font-size in your project’s CSS that targets an icon or directly in the style attribute of the HTML element referencing an icon.
Advanced Sizing Customization
If you’re using our Sass or Less CSS pre-processor options, you can tweak both the relative and literal sizing scales to your liking via scale-based variables and mixins.
Go Make Something Awesome
Font Awesome is the internet’s icon library and toolkit used by millions of designers, developers, and content creators.
Работа со шрифтом Awesome
Иконочный шрифт Awesome — это простой шрифт, содержащий в себе в место букв символы и специальные знаки, которые легко оформлять через CSS по такой же аналогии как делаем мы это с простым шрифтом. То есть, при помощи CSS можем установить для них цвет, поменять размер, задать тень и многое другое.
В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.
- Содержание:
1. Как подключить шрифт Awesome
Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега <link> . Далее более подробно разберем каждый из этих способов.
Способ 1
Используем сторонние сервисы CDNJS или BootstrapCDN. Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:
Для подключения с CDNJS:
Для подключения с BootstrapCDN:
Этот код нужно добавить в раздел <head> желательно выше основного подключения style.css . После того как файл подключили, можно приступать использовать иконки на своем ресурсе.
Способ 2
Переходим на сайт Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts . Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link> , только теперь из папки css нашего сайта.
Используем полную версию:
Используем минимизированную версию:
2. Как работать с иконками Font Awesome
На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента <i></i> или <span></span> , но предварительно нужно прописать класс fa каждому из элементов.
Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after , а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.
2.1. Как увеличить иконку
Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x , fa-3x , fa-4x или fa-5x .
| fa-lg | fa-2x | fa-3x | fa-4x | fa-5x |
2.2. Как фиксировать ширину иконки
Для фиксирования ширины иконки используется класс fa-fw , задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.
2.3. Как маркировать списки LI иконками
Для замены стандартных маркеров в блоке <ul>. </ul> используются классы fa-ul и fa-li .
- элемент списка
- элемент списка
- элемент списка
- элемент списка
2.4. Кавычки для цитат обрамленные в рамке
Что бы установить рамку для иконки используем класс fa-border , а при помощи pull-right и pull-left можем добавят кавычки для текста.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.
2.5. Анимированные иконки
Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse . Так же можно использовать классы fa-spinner , fa-refresh , и fa-cog .
| fa-spin fa-cog | fa-spin fa-spinner | fa-spin fa-refresh | fa-spin fa-circle-o-notch | fa-pulse fa-spinner |
2.6. Поворачивание и отзеркаливание иконок
Для поворота иконки используется класс rotate-* в котором указываем числовое значение на какой градус иконка будет повернута. Для зеркального отображения используется два класса это fa-flip-horizontal для горизонтальное отзеркаливание и вертикального icon-flip-vertical .
| normal | fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical |
2.7. Группирование иконок
Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack . Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg , fa-2x , fa-3x , fa-4x , или fa-5x .
| fa-twitter на fa-square-o | fa-flag на fa-circle | fa-terminal на fa-square | fa-ban на fa-camera |
2.8. Примеры использование иконок в Bootstrap 3
Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.
3. Группы иконок
В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.
Как использовать и оформлять иконки с помощью CSS?
Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:
1) Подключите иконки к сайту
Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.
Здесь мы используем версию 5.8.1 link rel , чтобы определить связь между текущим документом и файлом со ссылкой:
2) Добавьте иконки к вашему UI
Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.
Код иконки будет выглядеть следующим образом:
3) Добавьте стиль к иконкам
Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.
Как использовать иконки Font Awesome
Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.
Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i> , вы можете заменить его на <span> .
Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом ( fas, fal, far или fab ).