Leveraging icons with Bootstrap 4.5

I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use them similar to Font Awesome, for example: 

<i class="fas fa-info-circle"></i>
.

The documentation provided at bootstrap hasn't fully clarified how to implement them in a similar manner. Essentially, I aim to utilize jquery to dynamically add an icon by setting a class on an object, but I lack a clear understanding of the necessary CSS for accomplishing this.

javascriptcssbootstrap-4icons

Answer №1

CSS:

.bi-headphones::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-headphones' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 0 0-5 5v4.5H2V8a6 6 0 1 1 12 0v4.5h-1V8a5 5 0 0 0-5-5z'/%3E%3Cpath d='M11 10a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-3zm-6 0a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem 1rem; 
  width:1rem; height:1rem;
}

Usage:

<i class="bi-headphones"></i>

I relied on an online tool to encode SVG for CSS:

Answer №2

The documentation does not specify that the Bootstrap icon is a FontAwesome icon. Once installed, you can use it as an SVG like this:

<svg class="bi bi-app" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M11 2H5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3zM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5z"/>
</svg>

Alternatively, you can use it by downloading the SVG to your project:

<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">

You can also utilize it in your CSS like this:

.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The AJAX request encountered an unexpected failure that cannot be identified (Using jQuery)

Are you facing issues with a service that returns JSON data? Check out this URL: If you're attempting a simple AJAX request, here's some sample code to get you started: $.ajax({ type: "get", url: "http://api.drag2droid.shamanland.com/ca ...

javascriptjqueryajaxjson

Issue: NG04002 encountered post migration from Angular to Angular Universal

Having recently created a new Angular app and converted it to Angular Universal, I encountered an issue when running the project using npm run dev:ssr. The error displayed in the terminal is as follows: ERROR Error: Uncaught (in promise): Error: NG04002 Er ...

javascriptangulartypescriptserver-side-renderingangular-universal

Arrange a collection of objects based on various nested properties

I am faced with the challenge of managing an array of objects representing different tasks, each categorized by primary and secondary categories. let tasks = [ { id: 1, name: 'Cleanup desk', primary_category: { id: 1, na ...

javascriptarraysdata-structuresgroupingreduce

What is the reason for receiving the "Must provide query string" error when using the fetch API, but not when using cURL or Postman?

I've been attempting to integrate the graphbrainz library into a React app using the fetch API. No matter how I structure my request body, I keep encountering this error: BadRequestError: Must provide query string. at graphqlMiddleware (C:\U ...

javascriptnode.jsreactjsgraphqlfetch-api

Warning of superfluous escape character when executing 'npm start' on a React application

I have encountered a warning while running my React app using npm start. The warning appears in the terminal and reads as follows: Line 24: Unnecessary escape character: \[no-useless-escape The warning is related to the following code snippet: va ...

javascriptnode.jsreactjsnpmecmascript-6

Changing the direction of scrolling in AngularJS

I'm currently working on an Ionic / Angular application and I've come across a situation where I need to change the scroll direction when scrolling. Usually, when you scroll down, the content moves down as well. However, I want to achieve the opp ...

javascriptangularjsscrollionic-framework

Conceal a div when the user is browsing within a Facebook page tab

I am trying to create a webpage that can be accessed directly or through a Facebook page tab. My goal is to only display a Facebook logo if the user is accessing the page outside of Facebook. If they are already viewing the page within Facebook, I don&ap ...

phpjavascriptfacebookwordpress

Using a Mixin as an Argument in Another Mixin in LESS CSS

Is it possible to pass the declaration of one mixin or style to another mixin as an input parameter? Consider the following example involving animation keyframes. This is how keyframes are typically defined in pure CSS: @-moz-keyframes some-name { fr ...

cssargumentslessmixinscss-animations

Is there a method available for us to successfully deliver an email to the user who has been registered?

I am currently working on the registration page for my React app. One of the requirements is to send a confirmation email to the user's email address once they have registered. The user's account will only be confirmed once they click on the veri ...

javascriptreactjsemailreact-reduxreact-hooks

ui-jq flot graph with lazy loading

I am working with this HTML code: <div id="test" ui-jq="plot" ui-options=" [ { data: {{line}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 }, label: 'Akademi' }, ], { ...

javascriptjqueryangularjsflot

Error message: The method app.get() is invalid as it is not a

I'm having trouble using Express in a prototype function ioServer() { } module.exports = ioServer; ioServer.prototype.start = function() { var app = require('express') var http = require('http').Server(app) ...

javascriptnode.jsexpressprototype

What is the best way to transfer properties to a different component using the onClick event triggered by an element generated within the map function?

I am currently working on an application using react to retrieve data from a mongodb database. Within one of the components, called Gallery, I have integrated a map function to display a list of items. My goal is to implement an onClick event for each elem ...

javascriptreactjsmongodbreact-hooks

Issue with scroll down button functionality not functioning as expected

Is there a way to create a simple scroll down button that smoothly takes you to a specific section on the page? I've tried numerous buttons, jQuery, and JavaScript methods, but for some reason, it's not working as expected. The link is set up co ...

javascriptjqueryhtmlcss

Modifying jQuery CSS causes certain CSS rules from a file to be deleted

When using jQuery to change the css of an element, I've noticed that it can remove some previously specified css rules for that element. For example, .className, .className2, etc... { background-color: black; color : silver; } .className: ...

jqueryhtmlcss

Looking for a way to easily swipe through videos?

My mobile phone viewport displays a series of pictures and videos, with the swipeleft/right function enabled for browsing. However, I noticed that while the swipe feature works fine for images, it stops functioning when a video is displayed. Can anyone p ...

javascriptjqueryjquery-mobile

Analyzing the string's worth against the user's input

I need help figuring out how to save user input on a form (email and password) as variables when they click "Register", so that the data can be used later if they choose to click "Login" without using default information. I am working on this project for s ...

javascripthtmlcss

External JavaScript file not executing defined function

My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...

javascriptjqueryhtml

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

I need to update line heights for a complete project. The requirement is that all line heights should equal the font size plus 4 pixels. Is there a simple way to do this using SCSS? Adjusting based on percentage would be easy, but the specific value is g ...

htmlcsssassfont-size

The implementation of an onclick event in a freshly created HTML element is functioning solely on the final element

One issue I encountered was that when I generated page number buttons at the bottom of a page, the onclick event only worked with the last button created. Below is an example of how the page buttons were displayed: https://i.stack.imgur.com/wHwI0.png ...

javascripthtml

Ways to exchange information among Vue components?

My role does not involve JavaScript development; instead, I focus on connecting the APIs I've created to front-end code written in Vue.js by a third party. Currently, I am struggling to determine the hierarchy between parent and child elements when ac ...

javascriptvue.jsvue-component