Customizing Bootstrap icon with padding, background color, and radius settings

Struggling with Bootstrap Icons and Bootstrap 5, I attempted to create a perfect circle background behind an icon by setting padding, background color, and a rounded circle radius. The code I used was 

<i class="bi-globe-americas text-white p-3 bg-primary rounded-circle "></i>
, but encountered the following issues:

  1. The background circle appeared as an oval rather than a perfect round shape.
  2. As the <i> element is inline, preventing wrapping caused complications - setting display: inline-block; resulted in this:

https://i.sstatic.net/OljUL.png

While using display: block led to this outcome:

https://i.sstatic.net/BVFLB.png

To achieve the desired result similar to this image:

https://i.sstatic.net/lxk3Z.png

htmlcsstwitter-bootstrapbootstrap-5bootstrap-icons

Answer №1

If you're looking to create a circular icon using Bootstrap, you can leverage the ratio classes. By setting your container div with a 1:1 aspect ratio, your icon will automatically appear as a circle.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313667d607d61">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-white p-3" style="width: 25%; background-color: #f8682c; border-radius:50%;">
<div class="bi-globe-americas rounded-circle ratio ratio-1x1" style="background-color:#fca384">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="white">
  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19... (The rest of the code remains unchanged)
</svg>
</div>
</div>

Just a heads up: I included the SVG icon directly in the code snippet because the tool requires JavaScript or CSS files for embedding purposes.

Update: To ensure both the icon and its background container are round, remember to apply a radius to the main container as well.

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

Optimal Placement of CSS and index.html Files in ReactJS with Redux

Currently, my setup for the index.html file looks like this: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Pra ...

javascripthtmlcssreactjs

Is it simple to customize the color of the close button in Bootstrap 5?

Bootstrap's v5 release brings updated styling to various components, including the close button. In previous versions, the close button had an "x" that could be easily styled with text properties, like inheriting color from its parent. However, in v5, ...

cssbootstrap-5

Conceal and reveal buttons at the same location on an HTML webpage

There are 3 buttons on my custom page called page.php: <input type="submit" value="Btn 1" id="btn1"> <input type="submit" value="Btn 2" id="btn2" onClick="action();> <input type="submit" value="Btn 3" id="btn3" onClick="action();> ...

javascripthtmlcss

Updating Select Options with Multiple Values using Javascript

My goal is to update the selected value of multiple select elements simultaneously using JavaScript. However, I am facing an issue where my script only updates one select element instead of all of them on the page. Unfortunately, I cannot modify the id att ...

javascriptjqueryhtml

Dealing with reactive form controls using HTML select elements

I am working with a template that looks like this: <form [formGroup]="form"> <mdl-textfield type="text" #userFirstName name="lastName" label="{{'FIRSTNAME' | translate}}" pattern="[A-Z,a-zéè]*" error-msg ...

javascripthtmlangularreactjstypescript

Error: Element not found. Element with the specified XPath query '//button[normalize-space()='LOAD MORE']' could not be located

My current project involves creating a web scraper that is designed to continuously scroll down a page until it locates the "Load More" button and then clicks on it. However, I am encountering an issue where the program is unable to find the specified butt ...

pythonhtmlseleniumweb-scrapingxpath

Flipped the dimensions of an image for better responsiveness

Trying to implement this particular design on a responsive website. Wondering if there's a way to establish an inverse resizing technique using jQuery / Javascript so that as the viewport shrinks, the text size increases. Attempted to use jQuery to a ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm encountering an issue with the "z-index: -1" property in React

After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research ind ...

javascriptcssreact-nativeexpo

Utilizing Bootstrap Modals to seamlessly redirect me to a new empty page

Despite the fact that my website functions perfectly fine without a build system, I am encountering an issue with the Bootstrap modals while using the Yeoman: Angular + Gulp build system. Whenever I click on a list item, instead of the modal appearing, it ...

javascriptangularjstwitter-bootstrapgruntjsbootstrap-modal

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

javascripthtmlresizewidthrow

How come the nth-child selector remains unaffected by other selectors?

Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/ <style> table td, th { padding: 8px; text-align: left; } table td:nth-child(1) { color: red; } table td { color: blue } </style> ... <table> <tr> ...

htmlcss

What is the best way to create a seamless transition for background-image animations

I have a div where I am applying a class that alters the background image: $('div').addClass('specialBackground'); However, the transition between the background images is too abrupt. I want to achieve a smooth fade effect between the ...

jquerycssbackground-image

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

javascripthtmlreactjs

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

cssjavafxfontsitalic

Creating a JSON file using the attributes and values of HTML tags

I am seeking assistance in generating a JSON file from HTML data using jQuery. The HTML structure consists of multiple departments with similar tags and classes: <div class="department_one"> <h1>Name Of Manufacturer</h1> < ...

jqueryhtmlajaxjson

Having trouble with the tool tip not showing up correctly in Internet Explorer?

Check out the code snippet below: <table> <tr> <td class="bgimg" valign="middle" width="10%" title="some title" nowrap> <img src="images/SomeLogo.gif"/> </td> </tr> </table ...

html

Ways to eliminate the default button styling

I've encountered an issue with the CSS for a button that I created, as it is not displaying as expected. https://i.sstatic.net/qHLZX.png Below is my HTML code snippet: .button{ /* center the button */ margin: 0; position: absolute; top: ...

htmlcss

Move the dropdown selection above all DIV elements

Check out this link: Make sure to select an option from the dropdown menu. Also, some of the options are hidden behind other elements. I noticed that if I target .join-form and remove overflow: hidden, the layout of the page becomes distorted. Can anyon ...

htmlcsstwitter-bootstrap

Customizable user profile page

I'm currently working with twitter bootstrap. My goal is to design a profile page featuring an edit button positioned on the top left corner. Upon clicking this button, all the profile details will transition into editable form fields (which I bel ...

htmlcssuser-interfacerazortwitter-bootstrap

Email contact form using PHP

After following a tutorial on creating a basic 'contact us' form using PHP, I want the form to display a thank you message or error message directly on the same page instead of redirecting to a separate thank you page. How can I modify the code ...

phphtmlformsemail