Align FontAwesome icons of various sizes vertically in a bullet-point list

Our website is built using Bootstrap v4.6.2 and FontAwesome 5.15.4. The following HTML code snippet displays an unordered list with FontAwesome icons of different sizes (0.8em vs 0.44em).

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeaab0a8b0ac">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<ul class="fa-ul">
  <li>
    <i class="fa-li fa fa-star fa-sm" style="font-size: 0.8em;"></i>
    <a href="#">Link 1</a>
  </li>
  <li>
    <i class="fa-li fas fa-circle fa-sm" style="font-size: 0.44em;"></i>
    <a href="#">Link 2</a>
  </li>
</ul>

The icons next to the links are not aligned properly. The circle icon is positioned further to the right compared to the star icon. Additionally, the icons should be vertically aligned with the text (currently, the circle icon is misaligned). How can we adjust the alignments to meet our requirements?

htmlcssbootstrap-4font-awesome-5

Answer №1

To maintain the current layout, I recommend using a CSS transform property like scale instead of adjusting the font-size.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353273d253d21">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li>
    <i class="fa-li fa fa-star fa-sm" style="scale: 0.8"></i>
    <a href="#">Link 1</a>
  </li>
  <li>
    <i class="fa-li fas fa-circle fa-sm" style="scale: 0.44;"></i>
    <a href="#">Link 2</a>
  </li>
</ul>

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

"Adjusting the height of Material UI card content to ensure fixed positioning at the bottom

Currently, I am working on mapping material-ui cards with dynamic content from a JSON object, resulting in varying card heights. I have successfully set a fixed height for each card, but the content is not aligned correctly. You can see the issue in this ...

javascripthtmlcssreactjsmaterial-ui

Stop the Nav bar item from collapsing

Alright, let's talk about the scenario: The situation is that I have a basic, plain, nav nav-tabs navigation bar with a few elements and a rightmost item (with pull-right) positioned as an <li> element which includes a dropdown. As the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

phpjavascripthtmlcssajax

Can one customize the background color of a segment in a radar chart using Chart.js?

Could I customize the color of the sectors in my radar chart to resemble this specific image? https://i.stack.imgur.com/U8RAb.png Is it feasible to achieve this using Chart.js? Alternatively, are there other chart libraries that have this capability? It ...

jquerycssangularjschart.js

Guide to linking an external URL with a lightbox image

I have created a gallery and an admin gallery page. In the admin gallery, there is a delete button that appears over the image. However, when I click on it, instead of showing the message "Are you sure?", it opens a lightbox. I suspect that the code for t ...

javascriptjqueryhtmlruby-on-railslightbox

What steps should I take to successfully implement a div ID selector in an HTML document?

<div id="nofries"> <h1 class="restaurant mt-5 ms-3">CRAZY GREEKS</h1> <h3 class="ms-5">GREEK FOOD, SUBS &amp; PIZZA</h3> </div> I'm having trouble with my div ID "nofries" not ...

htmlcssbootstrap-4

Why is my CSS selector automatically converted to uppercase in Internet Explorer?

I am facing an issue with my CSS file. Here is how it looks: /*mycss.css*/ body { margin: 0px; padding: 0px; } a:link { color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline; } a:visited { color: rgb(255, 255, 255); font-weight: norm ...

cssinternet-explorercss-selectors

Is it Possible to Customize the Font Color of the Bootstrap Disabled Class in Bootstrap 4?

I am currently using version 4.4.1 of the Bootstrap gem for my Rails application which includes a Bootstrap 4 navbar. Below is a snippet from my navbar code: <ul class="navbar-nav ml-auto"> <!-- Hidden li included to remove active class fro ...

htmlcssruby-on-railsbootstrap-4disabled-input

Personalized Bootstrap grid rows and columns

https://i.sstatic.net/R0yFY.png As a beginner in Bootstrap, I am having trouble achieving this specific layout in Bootstrap 4 grid. The areas marked in red are not appearing as expected. Here is what I have attempted so far: <div class="row"> ...

cssbootstrap-4

I am having difficulty with my ajax code and I am unsure of how to resolve it

Here is the code snippet. I am encountering an issue where pressing the button does not trigger any action, while I simply want to ensure that the AJAX functionality is working properly. The expected behavior is for an alert message to be displayed when th ...

jqueryhtmlajax

Error encountered in WebGrease.dll following the upgrade to Bootstrap 5 for MVC

Recently, I encountered an issue where updating to Bootstrap v5.0.2 caused a NullReferenceException in WebGrease.dll, while previous versions (v3 and v4) worked without any problems. Here is the code snippet from the shared layout: @Scripts.Render("~ ...

.netvisual-studiobootstrap-4nugetbootstrap-5

Angular component showcasing the usage of a nested input-group

I have developed an input component and a datepicker component in Angular. The input component generates the appropriate input tag based on the type parameter, whether it's text, number, etc. Meanwhile, the date picker is another component that contai ...

angulartwitter-bootstrapbootstrap-4angular-bootstrap

Unable to integrate Tailwind CSS in project

Having a bit of trouble with my HTML using Tailwind post CSS. Even though I have installed all necessary packages and linked the CSS, the classes don't seem to be applying. Here is a snippet from the tailwindconfig.js file: module.exports = { conte ...

csstailwind-csspostcss

The iPhone is highly magnified on a webpage

I've been working on this issue for a while now but just can't seem to find a solution. The website appears to be zoomed in for some reason, and I'm struggling to identify the cause. Here is the meta tag I've been using: <meta name= ...

phpiphonehtmlcss

"Struggling with vertical alignment in my scenario, any tips on how to achieve

I'm trying to vertically align my texts while ensuring that the green background div covers the entire height of the red color div. Right now, the green div only covers 90% of the red div and I'm not sure why. Can someone please explain what&apos ...

htmlcss

Is there a way for me to properly initiate the Material UI Modal from the parent component?

This is the main component: import React from 'react'; import ChildModal from 'ChildModal'; const MainComponent = () => ( <div> <span>Click </span> <a>HERE TO OPEN MODAL</a> <div> ); ...

javascripthtmlreactjsmaterial-ui

Tips for including an external babel JS (ES6) file in an HTML document:

To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...

javascriptjqueryhtmlecmascript-6babeljs

Using Bootstrap 4.1.x, the dropdown in the navbar pills triggers the tab content only once

My responsive navigation bar with pills and pill content is working well. However, when I tried to implement a dropdown inside the navbar, I realized that it's not functioning properly. The links inside the dropdown are not working and remain active w ...

bootstrap-4

Can the default Bootstrap classes in the ExtLib application layout control be modified?

I am currently using the responsive Bootstrap theme in combination with the application layout control in extlib, but I have been unable to locate any documentation on whether it is possible to modify the predefined Bootstrap classes. In the example below ...

javascriptcssxmltwitter-bootstrapxpages

What is the process for creating a button click listener event in Kotlin or JavaScript?

While working in IntelliJ IDEA, I have created a button in my HTML file with an ID. My goal is to change the header tag to say "button clicked" using Kotlin. After searching through kotlinlang.org and other resources, I am struggling to find a simple refe ...

javascripthtmlintellij-ideakotlinkotlin-js-interop