Looking to incorporate Bootstrap Icons within Semantic UI?

I'm in need of assistance. My current project involves using Semantic UI, but there's a requirement to incorporate Bootstrap icons from . However, I'm facing difficulty copying the svg information directly into the code for the sake of readability. I'm hoping to find CSS cheatsheet classes for Bootstrap icons, such as 

<i class="cat icon"></i>
. I'm wondering if anyone has created a Bootstrap CSS icons cheatsheet or if there's another solution available. Additionally, I'm unable to download SVG images and include them in an img tag. Your help is greatly appreciated.

cssbootstrap-4iconssemantic-ui-css

Answer №1

Instructions:

To start, choose any Bootstrap SVG Icon (for this example, we will use the phone icon). Next, copy the SVG code and create a CSS class as shown below.

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

Insert the SVG code in the background-image (svg tag). Make sure to include !important for background-image and background-repeat. Provide width and height values. These details are not mentioned in the Bootstrap Icons usage guidelines() Now you can easily use the Icon in your HTML code like this:

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

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

Develop an exclusive "click-once" button for a webpage

Can anyone assist me in creating a "one-time clickable" button to launch my website? I've searched through numerous threads on Stack Overflow but haven't found a solution yet. ...

javascripthtmlcssbuttondom-events

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

I have this HTML code that is functioning well on Chrome, Safari, and Mobile Safari. However, when testing it on Android 4.0.3, the translateZ property does not seem to have any desired effect on the div element. While everything else works as expected, ...

androidcss3dwebkittransform

Error Message Design in ASP.NET

I am currently developing a website using .net, which is a new technology for me. Here is the snippet of code I am working with... <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="V1" Display="Dynamic" ...

.netasp.netcss

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

cssreactjstypescriptnext.jsstyled-components

Adjust the size and position of the text input field

I'm struggling to find a way to both resize and move the box without one action interfering with the other. Whenever I attempt to change the size of the box, it triggers the move event at the same time. Clicking on the box should make it resizable, bu ...

javascripthtmlcss

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

htmlcss

What could be causing certain grid items to display in a disorderly manner?

Currently, I am working on a CSS grid layout that resembles the one showcased in this demo. The challenge I'm facing is related to the ordering of items within the grid. Specifically, every 6th and 7th item seem to be out of order and I would like the ...

htmlcsslayoutcss-selectorscss-grid

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

javascripthtmlcssjson

Zurb Foundation - Building a personalized form, but encountering issues with post creation functionality

After integrating Foundation Forms into my website to create a form, I am facing an issue where the post is not being created. Below is the HTML code snippet: <div style="padding-bottom: 5px; padding-top: 10px;"> <label> <h3><sma ...

htmlcssdjangoformszurb-foundation

Ensure that buttons appear neat and organized when viewed on mobile devices

As a CSS beginner utilizing the Bootstrap framework, I have encountered an issue with my button layout on mobile devices. I have successfully created a set of buttons that display correctly on both desktop and mobile views. In the desktop view, you can se ...

htmlcssbootstrap-4

Guide on integrating a newly bought template into an Angular 6 and Bootstrap 4 application

Although I have years of experience as a backend developer, I am relatively new to frontend development. Lately, I have been immersing myself in learning Angular 6 and Bootstrap 4 for an upcoming project at work. After setting up a basic Angular 6 applica ...

angularbootstrap-4angular6

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

javascriptcssvue.jsvue-routervuetify.js

What is the best way to position a button to the right side of the screen?

Is there a way to align a button to the right of a page? I attempted using text-align: right; and align-content: right; In addition, I want the button to utilize display: flex; #hideShow { display: flex; text-align: right; align-content: right; ...

htmlcss

How can I add an SVG tooltip that appears when I hover my

I have successfully implemented an SVG map showing marked locations and polygons, with CSS styling that makes the areas stand out on hover. I achieved this without using any JavaScript code. My next goal is to create a hovering window or tooltip that disp ...

javascriptjqueryhtmlcsssvg

An interactive selection tool for a website's navigation bar

Struggling to implement a dropdown menu for my navbar, none of the CSS methods I've tried seem to work. My current HTML code is as follows... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t ...

cssdrop-down-menunavigationuinavigationbarnavbar

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

Using React and CSS. I have set up my application to display a faded image on hover, with text that fades in over it. However, I am facing an issue where touching the text with my cursor removes the fade effect. Does anyone have a solution for preventing ...

javascripthtmlcssreactjswebkit

Changing the color of the collapsed icon for accordion buttons in Bootstrap 5

I've been attempting to alter the color of Bootstrap 5's accordion's "accordion-button" when it's collapsed. I tested the following code, but it only changes the background and not the icon color of the button. .accordion-but ...

cssbootstrap-5bootstrap-icons