Unable to properly align Font Awesome icons

I am facing an issue with the alignment of some divs that contain a Font Awesome icon with a circle around them. The problem is that they are not aligned correctly due to varying widths, causing the text to be misaligned vertically.

Is there a way to fix this? I vaguely remember there being a class that could help align them properly, but I can't recall the exact name of the class.

.circle-icon {
    background: #e3f4f6;
    padding: 10px;
    border-radius: 50%;
}
<div>
  <span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
  <span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
  <span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span>
</div>

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

htmlcsstwitter-bootstrapfont-awesome

Answer №1

Make sure to utilize stacking icons: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

.fa-circle {
  color: #e3f4f6;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>

<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
 </span>
  <span>10 Likes</span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>

You can also achieve the same effect with the CSS version:

.fa-circle {
  color: #e3f4f6;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
 </span>
  <span>10 Likes</span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
  <span class="fa-stack fa-1x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>

Answer №2

To standardize the size of each circle-icon, apply the width attribute uniformly across all instances.

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 is the process for designing bootstrap labels similar to this style?

https://i.sstatic.net/A0nUt.png I am looking to create an input design that changes based on the user's action. When the label is clicked, a violet line should appear. If the input is successful, a green line appears below the label. And for errors, ...

javascripthtmlcsstwitter-bootstraplabel

PHP email not going through, stuck on an empty screen

In the process of creating a PHP form mailer, I have encountered multiple obstacles and none of the versions seem to work. My goal is for the information submitted via the form to be automatically sent through email when the 'Submit' button is cl ...

phphtmlformsemailform-submit

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

javascripthtmlcssbootstrap-4

Is there a way to showcase the uploaded file contents on the current page without the need to refresh?

Is there a way to display the contents of an uploaded file on the same HTML page without opening a new tab or refreshing it? I have the following HTML and PHP codes for reading an uploaded file in a separate page, but I want to integrate it into the same H ...

javascriptphphtmlajax

Browsing the web with Internet Explorer and uploading images

I am facing an issue with a large form that contains over 100 submit buttons. The code I am currently using is: <input type='image' src='../images/add.png' name='FormDuplicate' value='" . $resInvoices['iProjectID ...

phphtmlinternet-explorer

Is it possible to assign unique QFont types to individual Unicode characters?

I have a unique challenge of displaying multiple international scripts within the same string in a QLabel. For example, the text on the QLabel might look like this: چاچي चाची ćāćī (dim. of ćāćā, q.v.), s.f. A paternal aunt (=ćaćī ...

htmlunicodefontsinternationalizationqt4

Nav item with unconventional alignment in flexbox

My footer's central navigation item is not centered, and I'm struggling to align it while maintaining even spacing between the links. I attempted to center it by adding a margin-right: 45px in the CSS file at the bottom (commented out in the Code ...

htmlcss

Ensuring PHP Input Validation on HTML Forms for Matching Two Values

This code snippet is designed for a form where users can input numbers. Each pair of numbers entered will be compared to determine which one is higher. <input type="number" name="team1" class="inputbox" oninput="validity.valid||(value='') ...

phphtml

The continuous cycle of animated effects using animate.css

I've been using animate.css to add animations to my elements, and here's a snippet of the code I'm working with: <button class='animated infinite pulse tada'>1</button> <button class='animated infinite pulse ta ...

javascriptjqueryhtmlcssanimation

Ways to Adjust the Earth's Position in WebGL Earth

I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve th ...

javascriptcsswebgl-earth

Box2dweb: Interaction Point of Collision

Currently working with box2dweb for a game development project. Need assistance in determining the contact point between a "Circle" and "Box". Aware that this can be achieved through b2ContactListener and the Post-Solve Event. Seeking guidance on impleme ...

javascripthtmlcanvasbox2d

Column alignment in Bootstrap 4

My objective is to create a page consisting of multiple rows, each containing a label column, a control column, and an optional unit of measure column. I aim for the label column to be consistent across all rows, adjusting to fit the longest label. To achi ...

htmljquerycssbootstrap-4

What is the maximum storage capacity for local storage on an iPhone?

Is there a limit to the local storage capacity in HTML 5 on iPhones? I've seen it's around 5 Mb, but that seems quite small. Any insights? ...

iphonehtmllocal-storage

TineMCE fails to trigger ajax-loading when accessing a textarea

Utilizing $.ajax() to inject this particular piece of HTML into a div on the webpage. <div class="board-container"> <form method="post" action="functions.php"> <input type="hidden" name="function" value="set_boards"> ...

javascriptjqueryhtmlajaxtinymce

jQuery is unable to retrieve the parent element of a dynamically generated element as it returns as undefined

I have created login and registration forms using ajax calls to send data. The server side of the application is built with Flask, and any errors are returned in JSON format. In the success function of the ajax call, I create an <li> element that dis ...

jqueryhtmldom

The script is malfunctioning on Google Chrome

Below is a script that I have: EXAMPLE : <script> var ul = document.getElementById("foo2"); var items = ul.getElementsByTagName("li"); for (var i = 0; i < items.length; i=i+2) { // perform an action on items[i], which repr ...

javascripthtml

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

javascriptjqueryhtmlcss

Looking for a way to conceal the scrolling content within a div beneath a transparent header? Seeking

This particular question has been asked multiple times, and after careful consideration, I found a solution that closely aligns with my scenario: Hide content underneath a transparent div while scrolling The crux of the issue is that the content div is m ...

javascriptjqueryhtmlcss

What are the steps for saving this HTML information into a different database?

When a user clicks the add to cart button, I want the data from my MongoDB database to be stored in another database named "cart" and displayed on a separate page. {% for item in product_data %} <div class="shop-item" > ...

pythonhtmlmongodbflask

Add navigation bar to every page - using HTML and CSS

Is there a way to smoothly insert HTML codes into all website pages without compromising the CSS design? I've attempted using but found it messy. Is there a simpler method to insert the HTML file into other files? The HTML file I'm trying to lo ...

htmlcss