What is the trick to showing text underneath a font awesome icon?

My HTML code contains font awesome icons, and I'm looking to have text appear below each icon instead of next to it. Currently, the text is displayed midway to the right of each icon.

<div class="icons">
<span class="fa-stack fa-4x">
  <i class="far fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-hammer fa-stack-1x"></i>
</span>
<span class="icons-text">Joinery</span>
<span class="fa-stack fa-4x">
  <i class="far fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-wrench fa-stack-1x"></i>
</span>
<span class="icons-text">Plumbing</span>
</div>

.icon-background {
    color: #000000;
}

.icons{
    text-align:center;
}

.icons-text{
    color:#000000;
  font-size:10px;
  padding:5px 0 10px 0;
  text-transform:uppercase;
  letter-spacing:1px;
}

I attempted using display:block within icon.text, which did stack the icons vertically, but I want them to stay horizontal next to each other.

htmlcss

Answer №1

There are multiple ways to achieve this, depending on the specific requirements. One approach is to convert the spans into divs, which will automatically stack the text below the icon. However, if you want the icon and text to remain on the same line as the next set, you can wrap each set in a div with the class "trade" and float it.

.icon-background {
    color: #000000;
}

.icons{
    text-align:center;
}

.icons-text{
    color:#000000;
  font-size:10px;
  padding:5px 0 10px 0;
  text-transform:uppercase;
  letter-spacing:1px;
}
div.trade {
  float:left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />

<div class="icons">
<div class="trade">
<div class="fa-stack fa-4x">
  <i class="far fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-hammer fa-stack-1x"></i>
</div>
<div class="icons-text">Joinery</div>
</div>
<div class="trade">
<div class="fa-stack fa-4x">
  <i class="far fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-wrench fa-stack-1x"></i>
</div>
<div class="icons-text">Plumbing</div>
<div>
</div>

Answer №2

If you're interested, here's a neater way to achieve the same:

.icons .fa {
  display: inline-block;
  padding: 0 0 10px;
  color: #000;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.icons .fa:before {
  display: block;
  width: 1.5em; height: 1.5em;
  margin: 0 auto 5px;
  border: solid .2em; border-radius: 55%;
  font-size: 6.4em;
  line-height: 1.5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />

<div class="icons">
  <span class="fa fa-hammer">Joinery</span>
  <span class="fa fa-wrench">Plumbing</span>
</div>

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

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

csscanvasnext.jscss-selectorsborder

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

htmlcss

Converting xpath location to pixels: A step-by-step guide

Is there a way to convert an Xpath location or an element ID into pixel coordinates (X,Y) using Java? I have searched extensively but have not been able to find a clear and simple answer. ...

javahtmlseleniumxpathselenium-webdriver

New button attribute incorporated in AJAX response automatically

data-original-text is automatically added in ajax success. Here is my code before: <button type="submit" disabled class="btn btn-primary btn-lg btn-block loader" id="idBtn">Verify</button> $(document).on("sub ...

javascripthtmljquerycssajax

Navigating into the forbidden territory of the if block that holds secrets untold

Encountering an issue with the angularjs $location feature. I have set up an auth interpreter that redirects to the login page if a 401 error (unauthorised) is returned by the server. In my app.js file, both the auth interpreter and the account data loadin ...

htmlangularjs

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

csshtml-tableborder

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

javascriptcssvideohtml5-videovideo.js

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

Issues with Vertical Alignment and Navigation

Link: Please resize the browser to mobile view. Issue with Header: I am facing alignment issues in the header. The elements do not seem to be aligned properly at the center of the header. The Android logo is aligned, but the text and dash image are not. ...

htmlcss

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

htmlcsstwitter-bootstrap

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

csscontainers

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

cssangulartypescript

Converting Beautifulsoup4's findAll() method output of HTML into a list of strings using Python

I'm just starting to explore Python, as I have a project idea in mind that I believe could be achieved by web crawling with Python. Currently following a tutorial series, I know that some consider findAll() to be outdated (I'm not sure why, but ...

pythonhtmlif-statementpython-3.xweb-crawler

What steps can I take to address the div issue in my React application?

After implementing Browser Router, I am encountering whitespace on the left and right side of the navbar. How can I resolve this issue? Below is the code snippet: <div className="container my-3"> <BrowserRouter> ...

htmlcssreactjsnavbar

What is the best way to implement a link that triggers a chat box in HTML?

Hello, I need some assistance with an HTML project. I am attempting to create a hyperlink that displays as a group of words, and when clicked, triggers a pop-up message. Additionally, I would like to have control over the content displayed in the pop-up ...

htmlpopup

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

I'm currently working on designing a simple navigation bar but I'm facing difficulties in aligning the elements correctly. See my progress here: https://jsfiddle.net/zigzag/bL1jxfax/ Here are my objectives: 1) Ensure that the navigation bar rea ...

jqueryhtmlcss