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 a dynamic JavaScript animation with frames

Is there a simpler method to animate a sprite with just 4 frames in HTML Canvas? Having a background in AS3 and C#, I found the code below to be overly complicated. It seems like I'll be spending hours trying to decipher it. Is there a more modern or ...

javascripthtmlcanvas

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

cssreactjsmaterial-ui

How can I modify the border color within a div element?

My journey into web development is just beginning, and I've grasped the basics of Java, JSP, HTML, JS, CSS, and JQ. However, I've hit a roadblock while attempting to change the border color of a div upon mouse hover. Despite my efforts, I haven&a ...

javascriptjqueryhtmlcss

Updating a data table using POST values in ASP.NET: A step-by-step guide

I am working on updating values in my database and want to ensure that my script is functioning correctly. In order to check, I created a POST method to send the values and confirm they are being received. Now, my question is, once the values are being se ...

javascripthtmljqueryasp.netasp.net-mvc

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

The central navigation system of the Owl Carousel

I am currently using the owl carousel plugin and I am struggling to figure out how to center align the navigation vertically while also using the autoHeight option. http://codepen.io/anon/pen/jJAHL I have attempted the following code snippet, but it seem ...

jquerycssowl-carousel

Difficulty with routing stylesheets in my Node Express server

Currently, I am setting up the back-end structure for my website. The file setup looks like this: public css main.css main_b.css index.hbs index_b.hbs server server.js To reference style sheets in the index files, I use link attributes wit ...

cssnode.jsexpress

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

Error encountered with the item properties in vue-simple-calendar 'classes'

For my Vue.js project, I am utilizing the npm calendar package called `vue-simple-calendar` and aiming to implement dynamic classes for each event item like background-color, etc. However, the `classes` property doesn't seem to be functioning as expec ...

cssvue.jsnpmcalendar

What could be causing issues with mysqli connection to the database?

Here is the content of my connect.php file: $mysql_hostname = "localhost"; $mysql_username = "root"; $mysql_password = "xxxxxxxx"; $mysql_database = "marrybrown_clean"; $bd = mysqli_connect ($mysql_hostname, $mysql_username, $mysql_password) or die (&apos ...

phphtml

Updating a div's class upon clicking in React

This is my code: render() { return ( <div className='btndiv'> <button className='btn'>Hide</button> </div> ); } I'm trying to change the class of the div from .btndiv to .btndiv ...

cssreactjsevent-handlingreact-class-based-component

Setting fixed width for table headers in Bootstrap 3

Can someone explain why the width of "th" is not fixed and new line breaks occur when the content is too big? Currently, the "th" width expands. How can this be fixed? The width of my first column is col-lg-2. Click here for an example image ...

htmlcsstwitter-bootstrap-3html-table

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...

javascripthtmlcss

Insert the META tag data specific to Facebook Instant Articles directly within the JavaScript code

My website is running on a custom-built CMS provided by a company, and it seems like a modified version of WordPress. They are unwilling to include a basic meta tag in our HTML code. I am looking for guidance on how I can incorporate Facebook's Insta ...

javascripthtmlfacebook

What is the most effective method for altering HTML form components using PHP?

Can you explain how to manipulate and add form elements using PHP? Let's say I have a form stored in a PHP variable like this: $originalForm = ' <form method="post" action="whatever.php"> <input type="text" name="iamtextfield" id="text ...

phphtmlregexdomxpath

Getting rid of the excess white space below the footer caused by concealed elements

In my design, I have three columns. The rightmost column is filled with 'Divs' containing collapsed information that can be scrolled through using the mouse wheel. The overflow in the center is hidden. The width of all three columns is set to 760 ...

htmlcss

Having trouble getting the innerHTML update to be triggered by onchange

Hey there, I am looking to tweak my file upload button so that it triggers a change in a specific span, signaling to the user that a file has indeed been selected. <script type="text/javascript"> function get_fileName(fileSelector, fileId) { var ...

javascripthtmldominput

HTML text not lining up with SVG text

Why is the positioning of SVG Text slightly off when compared to CSS text with the same settings? The alignment seems awkwardly offset. Any help in understanding this would be much appreciated! Even with x: 50% and the relevant text-anchor property set to ...

javascripthtmlreactjssvg

Utilizing HTML5 Drag and Drop feature to track the initial position of the element being dragged

Currently, I am utilizing the HTML 5 Drag and Drop API to create a sortable list with auto scroll functionality. One crucial aspect I am trying to incorporate is the ability to detect which specific part of an element was grabbed by the user. Take a look ...

javascripthtmldrag-and-drophtml5-draggable

What is the best way to present the new segment?

Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 sect ...

htmlcssbootstrap-4bootstrap-5