Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Vertically Align the Text with a Large Font Awesome Icon?
This article provides a complete guide on how to Vertically Align Text with Large Font Awesome Icons with the help of CSS. it is very challenging when aiming for perfect vertical alignment. This article will explore various methods to vertically align text with a large Font Awesome icon using CSS.
Approaches to Vertically Align the Text with a Large Font Awesome Icon
There are three different approaches to vertically align the text content along with large font awesome icon using CSS.
Using Flexbox
Flexbox is a modern layout module in CSS that simplifies the alignment of elements both horizontally and vertically. It is highly effective for aligning text with icons. Here, we use display, align-items and margin-right property to vertically align the text and add spacing between the icon and text.
- The display: flex; is used to enable flexbox to the container.
- The align-items: center; is used to vertically center the icons and text.
- The margin-right property adds the spacing between the icon and text.
Example
In this example, CSS Flexbox is used to align the text with Large Font Awesome Icon Vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Alignment</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.flex-container {
display: flex;
align-items: center;
}
.icon {
font-size: 68px;
margin-right: 10px;
}
.text {
font-size: 34px;
}
</style>
</head>
<body>
<div class="flex-container">
<i class="fas fa-star icon"></i>
<span class="text">Star Rating</span>
</div>
</body>
</html>
Using Inline-Block and Vertical Align
This method uses display: inline-block and vertical-align to align text with a large icon. It's useful for older browsers or simpler layouts.
- The display: inline-block; is used to make the icon and text behaves similar.
- The vertical-align: middle; is used to align the icons and text to the middle.
- The font-size: 0; is used to remove the whitespace between the inline-elements.
Example
In this example, CSS display: inline-block; and vertical-align is used to Vertically align the text with Large Font Awesome Icon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline-Block Alignment</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.container {
font-size: 0;
}
.icon, .text {
display: inline-block;
vertical-align: middle;
font-size: 68px;
}
.text {
font-size: 34px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<i class="fas fa-star icon"></i>
<span class="text">Star Rating</span>
</div>
</body>
</html>
Using Grid Layout
CSS Grid is another modern layout tool that provides powerful alignment capabilities. It can be used to align items within a grid cell. The used CSS grid properties are..
- The display: grid; is used to setup the content into the grid.
- The grid-template-columns is used to define the content into two columns.
- The align-items: center; is used to vertically align the grid items to center.
Example
In this example, CSS Grid Layout is used to Vertically align the text with Large Font Awesome Icon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid Container Alignment</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.grid-container {
display: grid;
grid-template-columns: 100px auto;
align-items: center;
gap: 10px;
}
.icon {
font-size: 68px;
}
.text {
font-size: 34px;
}
</style>
</head>
<body>
<div class="grid-container">
<i class="fas fa-star icon"></i>
<span class="text">Star Rating</span>
</div>
</body>
</html>
182 Views
