CODEWITHSUNDEEP
javascriptcssbootstrap-4icons
Mike
Mike

Reputation: 143

Using icons in Bootstrap 4.5

I'm trying to figure out how to use the icons in Bootstrap 4.5 via CSS. Are there any code examples you can point me to? Ideally I'd like to know what CSS declarations are needed to be able to use them like Font Awesome e.g. <i class="fas fa-info-circle"></i>.

The documentation at bootstrap https://icons.getbootstrap.com/#usage is not sufficient for me to figure out how to use them in a similar fashion. In other words, I'd like to be able to use jquery to set a class on an object to add an icon dynamically but I don't understand the CSS I need to do this.

Upvotes: 3

Views: 2628

Answers (2)

FDN
FDN

Reputation: 124

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 use URl SVG encoder to prepare svg for css: https://yoksel.github.io/url-encoder/

Upvotes: 2

Ricky Orlando Napitupulu
Ricky Orlando Napitupulu

Reputation: 506

i cant find in the doc that bootstrap icon is fontawesome icon after you install it you use it as a svg like this one

<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>

or you can use it this way after you download the svg to you project

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

or on your css

.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;
}

Upvotes: -1

Related Questions