Bootstrap is one the most popular frontend framework initially developed by Twitter. The primary objective of the framework is to create mobile friendly websites using reusable components. Initially Bootstrap was offering the Glyphicons, then using Font Awesome and now offering their own set of icons called Bootstrap Icons. You can use Bootstrap Icons on any of you websites including WordPress sites. The good part is that you need not to use the base framework CSS and JS for using the icons. In this article, we will explain how to use Bootstrap Icons in WordPress sites. If you want to learn more about Bootstrap, check our tutorials on Bootstrap 5.
Bootstrap Icons
Till few years back, Font Awesome was so popular that almost every developer and website owner was using them. This was initially developed for using with Bootstrap which is essentially replaced with the free Bootstrap Icons set. You can use Bootstrap Icons in two ways in any project – SVG and web fonts. In case if SVG is not working on your WordPress site, you can use web fonts option.
Using the icons in WordPress involves two steps:
- Linking icons CSS in header
- Embedding HTML in content
Linking Bootstrap Icons CSS in WordPress
Though you can download and host the icons on your server, the easiest way is to use their CDN link. Here is the latest CDN link for Bootstrap Icons:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">You need to insert this link in the header section of your WordPress site. There are many free plugins available for inserting CSS links in the header like Insert Headers and Footers By WPBeginner. However, this plugin does not offer any control on inserting the link only on few pages. It will by default load the CSS file throughout your site in the header. This may be not required when you only want to use the icons on few posts or pages. In such a case, you can use Header Footer Code Manager plugin which we will explain in this article.
- Login to your WordPress admin panel and go to “Plugins > Add New” section.
- Search for “header code” to find the Header Footer Code Manager plugin.
- Click “Install” button and the “Activate” button to start using the plugin on your site.
After activating the plugin, it will add a new menu item in the sidebar called HFCM. Hover over the HFCM menu and select “Add New” option. You will see two sections – one for controlling the snippet and then the box for pasting actual code. Fill the following details on the first section:
- Snippet name – enter name for your snippet like Bootstrap Icons.
- Snippet Type – select CSS from the dropdown.
- Site Display – here select “Site Wide” option for inserting the CSS throughout your site. Otherwise, select from one of the available options like specific posts, pages, categories, tags, home page, etc. You will see additional options based on your selection. For example, selecting specific posts will show the “Post List” dropdown for selecting your posts. You can select single or multiple posts in which you want to show the icons. If you want to use site wide, then it is possible to exclude loading the CSS on certain posts and pages by selecting them from the exclusion list.
- Location – select header option.
- Device Display – select “Show on All Devices” option. If required, you can choose only on desktop or mobile.
- Status – select “Active” option.
After filling out all the details, paste the CDN link in the “Snippet / Code” section.
Click on “Save” button to apply your changes.
Inserting HTML for Icons
Now that you have inserted the CSS in the header section, the next step is to embed the HTML for your icons. Similar to Font Awesome icons, each Bootstrap icon also has a code point and corresponding CSS class name. You can refer the icons page to get the complete list of CSS class names for all your favorite icons. All what you need is to embed the HTML code with correct CSS class name of the icons using Custom HTML block. You can either use SVG or web fonts as the linked CSS from CDN allows both options.
Using Web Fonts
This is the easiest option as you only need to know the CSS class name for your icon. For example, below is the format for inserting WhatsApp icon font.
<i class="bi bi-whatsapp"></i>You can change the size and color by adding inline CSS like below:
<i class="bi bi-whatsapp" style="font-size: 5rem; color: blue;"></i>You can simply paste this code inside Custom HTML block.
Publish your post and the icon will look like below when view the published post.
You can add additional icons inside the same Custom HTML block to show the complete list of social icons as a widget. If you want to add hyperlinks to your icons, simply wrap the icons with HTML anchor tags. You can also use to add space between icons. Below is the code for a social widget with Facebook, Twitter, YouTube icons.
<a href="https://www.facebook.com/"> <i class="bi bi-facebook" style="font-size: 5rem; color: blue;"></i> </a>
<a href="https://twitter.com/"> <i class="bi bi-twitter" style="font-size: 5rem; color: lightblue;"></i> </a>
<a href="https://www.yourtube.com/"> <i class="bi bi-youtube" style="font-size: 5rem; color: red;"></i> </a>
It will look like below on the published post.
Using SVG Icons
In order to use SVG format, you need to get the SVG for the icons and CSS class. You can get this by clicking on the icon from Bootstrap Icons page and copy the code under “Copy HTML” section as shown below.
The SVG will be in the below format and by default icon size is controlled through width/height properties.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>You can change the size and add custom color using the CSS color attribute like below.
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" style="color: blue;">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
Now you can embed this code inside Custom HTML in your WordPress site. You can either click on the preview to see the icon or publish the post to view the icon in the live page.
Final Words
Since Bootstrap Icons are open source and available for free, you can make use of them to beautiful your WordPress content. We recommend using web font option which only needs the CSS class name for icons. However, you can use SVG if you are comfortable. Note that if you are already using a Bootstrap based WordPress theme, the CSS link for icons should be part of your theme and you do not need to insert using a plugin.
Leave a Reply
Your email is safe with us.