Buzz
To understand how to use Bootstrap icons, readers can refer to the following Bootstrap lesson by Mytour.
Exploring Bootstrap Icons
1. Bootstrap Icons
Unlike Bootstrap 3, which included Glyphicons (font icons) in font format, Bootstrap 4 does not come with an icon library by default.
However, we can still add icons to our project by using an external font icon library. The most popular and Bootstrap-compatible library is Font Awesome, which includes 675 different icons available in font format.
The advantage of using font icons is that we can create icons with any color using the color property in CSS.
2. Adding Font Awesome in Bootstrap
We simply need to use the available Font Awesome CDN link to add Font Awesome icons to our project. Essentially, the CDN link points to a remote CSS file containing the necessary classes to create various icons.
Example: The following example illustrates how to add Font Awesome to a project:
The output result looks like this:
3. Using Font Awesome Icons in Code
To use Font Awesome icons in code, we need an i tag with the .fa class and the icon class .fa-*. The general syntax for using Font Awesome icons is as follows:
In the above syntax, fa-class-name is the name of the specific icon class (such as fa-search, fa-user, fa-star, fa-calendar, fa-globe, ...) defined in the font-awesome.min.css file.
Example: To add and use the search icon, we can place the following code snippet anywhere:
The output result appears as follows:
Similarly, we can place icons within headers, paragraphs, tables, or any desired location.
Note: We use spacing after the closing icon tag (i.e., after the tag) when using icons alongside text strings such as buttons or navigation links, to ensure proper spacing between the icon and the text content.
This lesson from Mytour has introduced you to icons in Bootstrap. In the next lesson, Mytour will further introduce you to Tabs and Pills in Bootstrap.
Additionally, if you have any inquiries or questions needing clarification, feel free to drop your comments below the article.
