Want to use Bootstrap Icons in Semantic UI

Question

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

Answer 1

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: