how to put text and font awesome in a line with a proper way?

Question

I just wants to display a font awesome icon and text in a line:

<th>
 <span>
  <a>
   <i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"></i>
  </a>
 </span>
 <span> Add Task</span>
</th>

It's working but the problem is =>

If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?

Are you looking for [`vertical-align`](https://stackoverflow.com/questions/22545325/how-to-vertically-align-text-with-icon-font)? ← You can click that — domsson, Jul 12 '17 at 11:59
Never do inline css / js - tis a terrible practice that leads to hard-to-maintain code. Also `display: inline-block` is the droid you're looking for :) — treyBake, Jul 12 '17 at 12:00
For accessibility, your text «Add Task» should be inside your link, like in the question linked by domdom. — Kustolovic, Jul 12 '17 at 12:08
I think ,vertical-align: middle; will solve your issue. But it is better to include in any of your pre-defined classes. — Vivek Verma, Jul 12 '17 at 12:13
@GCyrillus and on that note, why even use *any* tag for an icon? Why is no one using `background-image` anymore? Or `::before` for that matter. I see this so often. And almost always with class `fa`. Where is that from, I wonder? — domsson, Jul 12 '17 at 12:25
Ah, cheers @Kustolovic -- now it all makes a lot more sense. — domsson, Jul 12 '17 at 12:54

Robert Williams · Answer 1 · 2017-07-12T12:48:44.003

2

Target the element containing the font-awesome icon. Set position as relative and adjust top value;

a {
  text-decoration: none;
  font-family: Arial;
  color: #333;
}


/*Example 1*/

i {
  color: green;
  vertical-align: sub;
  font-size: 50px;
}

i::before {
  font-size: 30px;
}


/*Example 2*/

span {
  color: green;
  font-size: 50px;
  position: relative;
  top: 4px;
}

span::before {
  font-size: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<!--Example 1-->

<a href="#">
  <i class="fa fa-plus-circle" aria-hidden="true"></i> Add Task
</a>

<br>

<!--Example 2-->

<a href="#">
  <span class="fa fa-plus-circle" aria-hidden="true"></span> Add Project
</a>

Example Code Pen: https://codepen.io/Omi236/pen/KqbQoO?editors=1100

edited Jul 12 '17 at 12:48

answered Jul 12 '17 at 12:14

Robert Williams

1,370
1
17
38

That's not the right answer, the question was vertical alignement when the icon is bigger. Your icon is at the same size. The solution is just vertical-align. – Kustolovic Jul 12 '17 at 12:25
I have explained that as well – Robert Williams Jul 12 '17 at 12:25
Yes but relative position a poor way to solve the problem. vertical-align is more robust, and using a p tag is not useful here, and meaningless – Kustolovic Jul 12 '17 at 12:31
Is it ok now? I have added both examples. – Robert Williams Jul 12 '17 at 12:49
better solution :) – Kustolovic Jul 12 '17 at 13:02
I believe no extra span and vertical-align works fine on its own : https://codepen.io/gc-nomade/pen/WOLPGY?editors=1100 – G-Cyrillus Jul 12 '17 at 14:58
@GCyrillus Not always. Sometimes I myself feel the need of aligning them. – Robert Williams Jul 12 '17 at 16:45

Billu · Answer 2 · 2022-03-16T19:46:18.430

In your case, you just need to use font size property at parent level.

Working example

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<a style="font-size:16px;"><i class="fa fa-plus-circle"style="color:green;"></i><b> Add New</b></a>
</body>
</html>

how to put text and font awesome in a line with a proper way?

2 Answers2