Bootstrap Icons — Bootstrap 5: Основы верстки
При создании страницы важно дать пользователю возможность быстро анализировать ее. Это позволяет отделять части сайта друг от друга и акцентировать внимание на определенных участках страницы или блока.
Для решения этой задачи используются разные способы:
Шрифты, цвет, границы и тени в Bootstrap можно сделать с помощью утилит. Один из способов создания графического акцента — использование иконок. Раньше для иконок использовались сторонние решения, такие как шрифты или паки иконок. Теперь можно использовать библиотеку Bootstrap Icons, которая предоставляет больше 1500 иконок.
Стиль Bootstrap Icons отлично сочетается с компонентами Bootstrap, значит, не придется подбирать десятки разных иконок, чтобы найти нужную.
В этом уроке мы научимся подключать и использовать иконки от разработчиков бутстрап в своем проекте.
Подключение Bootstrap Icons
Bootstrap дает шесть способов подключения иконок на страницу. В этом уроке разберем использование иконок в виде шрифта. Такой способ позволяет быстро подключить, изменить и отредактировать стиль иконки с помощью простых утилит.
Чтобы подключить шрифт, используйте официальную ссылку со страницы Bootstrap Icon. В конце урока будет приложена ссылка. В середине 2023 года свежая версия иконок: 1.10.5. Подключим ее на странице с помощью тега <link> :
В коде выше мы создаем базовую структуру документа и подключаем основные файлы:
bootstrap.min.css — основной файл библиотеки Bootstrap со всеми компонентами и утилитами
bootstrap-icons.css — файл стилей для иконок. Внутри этого файла подключаются шрифты и стили для иконок
Иконки необязательно использовать только внутри проектов Bootstrap. Можно подключить файл в любой готовый проект.
Использование иконок на странице
Для добавления иконок используется пустой элемент с двумя классами:
bi — структурный класс Bootstrap Icon
bi-название — какую иконку отобразить в теге
Разберем добавление на примере иконки Truck Front :
У иконки Truck Front используется два класса: bi и bi-truck-front . Часто в качестве тега для иконки используется парный тег <i></i> . Воспользуемся им и добавим иконку на страницу:
Мы увеличили масштаб, чтобы иконку было лучше видно. Изначально все иконки добавляются в размере 16×16 пикселей. Изменить размер иконки можно с помощью классов для текста fs и display .
Иконки удобно использовать внутри компонентов. Добавим внутрь компонента кнопки иконку:
В этом примере хорошо видно, что иконки легко встраиваются внутрь любых компонентов и частей страницы. В качестве последнего примера добавим иконки в форму регистрации пользователя:
Выводы
Для использования иконок внутри макетов Bootstrap используется библиотека Bootstrap Icons. В отличие от других библиотек иконок Bootstrap Icons хорошо сочетаются с компонентами фреймворка. Это позволяет быстро добавлять иконки на странице и не беспокоиться о визуальном сочетании.
Для большинства проектов будет достаточно добавить иконки с помощью тега <link> . В этом случае можно использовать иконки с помощью двух классов:
bi — структурный класс Bootstrap Icon
bi-название — какую иконку отобразить в теге
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Webpack — Bootstrap Icons
Bootstrap Icons is a free, high quality, open source icon library with nearly 1,200 icons.
I had some problems installing Bootstrap Icons with Webpack 5. There was no information on the web, so I decided to post it here for people who might be interested.
Installation
To get started, install via npm:
The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
Как подключить иконки bootstrap 5
Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project
By Iheanacho Amarachi
Bootstrap 5 Icons are small pictures or symbols representing a piece of information or content on a website. Icons can also link to different parts of the web page or a different website entirely (e.g., social media icons on a website usually link to the company's social media account, brand, or person).
Bootstrap 5 Icons can also be entirely decorative and be implemented to complement the overall look or aesthetic of a website. Either way, icons have become a more prominent feature in modern-day websites. It has become almost impossible to see a website without one.
Table Of Contents
- What are we building?
- Prerequisites
- What is Contrast and why?
- Creating our Bootstrap 5 Sidebar
- The Default Icons
- Border Icons
- Spin Icons
- Pull Icons
- Pulse Icons
- Rotate Icons
- Size Variations
- Conclusion
- Resources
What are we building?
In this article, we will walk through adding icons to your HTML project using Contrast bootstrap 5 library.
Prerequisites
To make the most of this article, you must have the following:
- A basic understanding of HTML.
- A basic understanding of CSS.
What is Contrast bootstrap 5 and why?
Contrast or Contrast Bootstrap 5 is an elegant bootstrap UI kit featuring over 2000+ essential components. Contrast helps simplify the web development process and can be integrated with any project to build mobile-first, responsive, and elegant websites and web apps. With predefined styles, you can now create web pages faster than ever without having to write any code and the documentation is always available for better understanding.
Adding the Bootstrap 5 UI library CDN
The Contrast Bootstrap 5 UI kit allows us to use predefined styles, accessed with the contrast library class names. To use these styles in our HTML project, we need to install the Contrast Bootstrap 5 library by adding the CDNs.
We include the CSS CDN responsible for the Bootstrap styling in the <head> in our HTML file. If you are feeling confused about how to use the Bootstrap 5 UI kit icons on your project you can look at the Icon documentation.
After including the CSS CDN, we include the JavaScript CDN links at the bottom of our project in the <body> . We do this because we want the components to load before adding the interactive functionality, that JavaScript gives us.
After adding both the CSS and JavaScript CDNs, our HTML file should look like this.
Using Bootstrap 5 Icons
The Default Icons
We use the i element to add icons to our project.
The second class indicates what small picture we want on our icon.
Creating Default Icons would look like this on your browser:
Border Icons
Use the icon-border to give your icons a border.
Our border icons should look like this:
.
Spin Icons
To spin your bootstrap 5 icons, use the icon-spin class.
Pull Icons
To flip your icons to their mirror image, give your the class of icon-pull .
Pulse Icons
The icon-pulse spins your icons a little faster.
Rotate Icons
To rotate your icon 360 degrees, use the icon-rotate class.
After adding the class we should see this.
Size Variations
With the Bootstrap 5 UI kit, we can specify what size of icons we want.
There are three different sizes variations of the bootstrap icons:
- the small size, is indicated by the icon-sm class.
- the medium size, which is also the default value, icon .
- the large size, is indicated by the icon-lg class.
Conclusion
This article discussed what Bootstrap 5 icons are and why you would need one on your web page. Next, we included the Contrast Bootstrap 5 CDN in our HTML page and finally added icons in our HTML project using the different predefined styles available from the Bootstrap 5 UI kit.
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
How to create Tailwind CSS Components for your Website
How to install Tailwind CSS in Laravel
Visually Build and Generate Code for your Frontend.
Use Windframe to visually build webpages in minutes using tailwind css
Generate HTML, Angular, React, Vue code for your websites on the fly and spend less time centering divs ��
Bootstrap Icons
In this tutorial you will learn how to include and use Bootstrap icons on a web page.
Using Icons in Bootstrap 5
Bootstrap now includes over 1,300 high quality icons, which are available in SVGs, SVG sprite, or web fonts format. You can use them with or without Bootstrap in any project.
The advantage of using font icons is, you can create icons of any color just through applying the CSS color property. Also, to change the size of icons you can simply use the CSS font-size property.
Now, let’s see how to include and use Bootstrap icons on a web page.
Including Bootstrap Icons in a Web Page
The simplest way to include Bootstrap icons in a web page is using the CDN link. This CDN link basically points to a remote CSS file that includes all the necessary classes to generate font icons.
You can include Bootstrap icons in a Bootstrap template as well as in a simple web page without using the Bootstrap framework. Let’s take a look at the following example:
Example
How to Use Bootstrap Icons in Your Code
To use Bootstrap icons in your code you’ll require an <i> tag with an individual icon class .bi-* applied on it. The general syntax for using Bootstrap icons is:
Where class-name is the name of the particular icon class, e.g. search , person , calendar , star , globe , facebook , twitter , and so on. See the list of all Bootstrap icons classes.
For example, to place search icon inside a button you could do something like this:
Example
— The output of the above example will look something like this:
Similarly, you can place icons inside the navs, forms, tables, paragraphs or anywhere you want. In the next chapter you will see how to use these icons in Bootstrap nav components.
Note: Remember to leave a space after the closing tag of icon element (i.e. after </i> tag), when using the icons along with the strings of text such as inside buttons or navigation links, to ensure that there is proper spacing between the icon and text.
Using Font Awesome Icons in Bootstrap
You can also use external icon libraries in Bootstrap. One of the most popular and highly compatible external icon library for Bootstrap is Font Awesome. It provides over 675 icons which are available in SVG, PNG, as well as in web font format for better usability and scalability.
You can simply use the freely available font-awesome CDN link to include it in your project. Let’s take a look at the following example to understand how it basically works:
Example
How to Use Font Awesome Icons in Your Code
To use Font Awesome icons in your code you’ll require an <i> tag along with a base class .fa and an individual icon class .fa-* . The general syntax for using font-awesome icons is:
Where class-name is the name of the particular icon class, e.g. search , user , calendar , star , globe , facebook , twitter , and so on. See the list of all Font Awesome icons classes.
For example, you can place font-awesome search icon inside a button like this:
Example
— The output of the above example will look something like this:
Similarly, you can place Font Awesome icons inside the navs, forms, tables, paragraphs, and other components in the same way as you do with Bootstrap icons.