Separate the center icon from its corresponding text

Looking for a solution to center Font Awesome icons vertically while keeping the text aligned separately? Currently, the icons and text are centered together on the page, but I want the icons to be centered vertically and the text to follow independently. Is there a way to achieve this without creating messy CSS code by wrapping each element in separate containers? Check out the code snippet below if you're unsure about my query. Appreciate any insights.

<section class="contact-main">
  <div class="container">
    <div class="email">
      <i class="fas fa-envelope fa-3x"><p> Email</p></i>
    </div>   
    <div class="phone">
      <i class="fas fa-phone-square fa-3x"><p> Phone</p></i>
    </div>      
    <div class="facebook">
      <i class="fab fa-facebook-square fa-3x"><p> Facebook</p></i>
    </div>
  </div>        
</section>
htmlcss

Answer №1

If you want to use fixed-width icons, simply add the class fa-fw to your icons. You can find more information about this in the provided link.

Here is an example of how you can incorporate fixed-width icons into your HTML:

<div class="list-group">
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

I trust this example clarifies how to use fixed-width icons in your HTML code.

Answer №2

Is this what you had in mind? Check it out on Fiddle

<body>
<section class="contact-main">
    <div class="container">
    <div class="list-group">
      <div class="email">
        <i class="fa fa-envelope fa-3x fa-fw"></i><h3 style="display:inline-block;">Email</h3>
      </div>   
      <div class="phone">
        <i class="fa fa-phone-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Phone</h3>
      </div>      
      <div class="facebook">
        <i class="fab fa-facebook-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Facebook</h3>
      </div>
    </div>
    </div>        
</section>
</body>

Answer №3

I was spending too much time overanalyzing the situation. Eventually, I figured out that all I had to do was adjust their alignment using position: relative. It was like a lightbulb suddenly switched on!

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

Enhancing your Vue web application with Bootstrap: A guide to customization

Utilizing bootstrap-4 within my Vue web application has been challenging. I am unable to customize it as explained here. My index.html utilizes Bootstrap CDN, as shown below: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

csstwitter-bootstrapvue.jsbootstrap-4twitter-bootstrap-4

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

Accessing the phone number input from a form in Rails and verifying its presence in the database. Implementing distinct ajax responses based on the existence of the value

Looking for a way to verify phone numbers? The process involves users entering a phone number, submitting the form, and cross-referencing it with a database of phone number records to determine if it's valid. My goal is to provide different AJAX respo ...

jqueryhtmlruby-on-railsajaxerb

Updating content with jQuery based on radio button selection

Looking for assistance with a simple jQuery code that will display different content when different radio buttons are clicked. Check out the code here. This is the HTML code: <label class="radio inline"> <input id="up_radio" type="radio" n ...

javascriptjqueryhtml

Leveraging a combination of AngularJS directives within a single div element

Why can't I use multiple directives in the same div tag in AngularJS? The product names from the module are not displayed with the following HTML code: <!DOCTYPE html> <html ng-app="gemStore"> <head> <title></ti ...

javascripthtmlangularjs

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

htmltypescriptangularpolymerpaper-elements

Limit the ability to zoom in a webview application

I am facing an issue with my Android WebView app that is designed to load a specific URL and display it along with its links within the app. Despite setting the webpage size to 720px x 1280px using CSS to fit the screen of a Galaxy S3, I am encountering di ...

androidcssandroid-webview

Problem with looping through arrays in JQuery using .each() function

Looking for some help with jQuery and JavaScript, please bear with me if my question seems naive. I am attempting to load images from different folders into corresponding divs to create a gallery. <div id="menu"> <div class="gallery" id="div0"&g ...

jqueryhtmlarraysimage-galleryeach

Despite being positioned absolutely, they are able to make z-index work effectively

Currently, I am facing an issue with two elements in my design. The first element consists of dotted circles that should have a z-index of -999 so they remain in the background entirely. The second element is a login form that needs to have a z-index of 99 ...

htmlcssz-index

Store the show/not show status of the collapse item-1 class using either local storage or session storage

Having trouble maintaining the state of my collapsible items after a page refresh. I'm using bootstrap 5. To keep the accordion item open, you need to add show to the class. <div role="tabpanel" data-bs-parent="#accordion-1" cla ...

htmljquerybootstrap-5

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

cssloopssass

Tips for retrieving the option text value following an onchange event in AngularJS

Whenever I change the selection in my dropdown menu for 'Cities', the alert is displaying the value of the previous selection instead of the current one. For example, if I select a state and then switch to Cities, the alert shows the text related ...

javascripthtmlangularjs

Arranging Div Elements in a Specific Layout

I am currently experimenting with http://jsfiddle.net/ngZdg/ My main goal is to create a parallax website, but I am facing some challenges with the initial layout. I am aiming for the following design: ------------------------------------- | ...

htmlcss

degree of transparency when semi-transparent elements overlap

Imagine you have two <div> elements, one with an opacity of .5 and another overlaying it with the same opacity. What would be the combined opacity of the two? Interestingly, it's not as simple as, .5 × .5 or even, .5 + .5 How can this ...

htmlcssmathtransparency

Javascript collapsible panel that is initially expanded

I found this code example here and decided to implement a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle("collapsible-active"); var buttonId = this.id; var sectionId = buttonId ...

javascripthtmlcss

integrating live html content into dompdf with php

Hey there, I'm currently working on a script that dynamically loads HTML using the file_get_contents function and then generates and saves the PDF on the server. However, I'm running into a problem where my PHP file is throwing a 500 internal ser ...

phphtmlmysqldynamic-datadompdf

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

Exploring the inner workings of AngularJS SEO in HTML5 mode: Seeking a deeper understanding of this hidden functionality

There are plenty of resources available for incorporating SEO-friendly AngularJS applications, but despite going through them multiple times, I still have some confusion, especially regarding the difference between hashbang and HTML5 mode: In hashbang (# ...

javascripthtmlangularjsseoweb-crawler

Special effects for the images动画效果。

Is there a way to add animation effects to images in the about section using this code: <div id="about" class="row section bgimg3"> <div class="col-sm-8"> <h2 style="color:black;">Want to Know More About me?</h2> ...

javascriptjqueryhtml

Adjusting the width of columns in a flex layout using Bootstrap 4

On mobile, I am attempting to rearrange some elements in a different order. Currently, this is what I have: https://i.stack.imgur.com/fY3PQ.png Below is the HTML code: <main> <div data-color="yellow"></div> <div class="wrapper"& ...

cssbootstrap-4flexbox