-1

I need a help. My project is on Semantic UI, but I have a requirement in my project to use bootstrap icons (https://icons.getbootstrap.com/) .. But I can't copy the svg info directly in to the code due to the readability factor. Instead I am looking for some CSS cheatsheet classes of Bootstrap icons like (<i class="cat icon"></i> ). Just want to know if some one has created Bootstrap CSS icons cheatsheet or do we have any solution for it. Also, I can't download SVG images and include it in img tag. Please help me

Mahesh Kumar
  • 29
  • 1
  • 5
  • you can look here and see if it fits your need? https://fontawesome.bootstrapcheatsheets.com/ – Fareed Khan Jul 08 '20 at 10:41
  • Thanks Fareed Khan. But this is not I am looking for. In the above link, he is focused on Bootstrap 3 glyphicons. But I need cheatsheet for Bootstrap 4 SVG icons. – Mahesh Kumar Jul 08 '20 at 13:35

1 Answers1

0

Steps:

Select any Bootstrap SVG Icon(in this case selected phone icon). Copy the SVG code and make a CSS class like below below way.

i.icon.bi-phone::before { display: inline-block; content: ""; background-image: url( 'data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-phone" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/><path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>') !important; background-repeat: no-repeat !important; background-size: 1rem 1rem; width:1em; height:1em; }

Put SVG code in background-image(svg tag) Background-image & background-repeat should be given !important. Width & height should be given. This point is not mentioned in Bootstrap Icons usage(https://icons.getbootstrap.com/#usage) Now we can use Icon in our HTML like:

Mahesh Kumar
  • 29
  • 1
  • 5