Add text next to icon
Just add a span
tag after the image, within the link...
HTML:
<div class="col-sm-4 follow ">
<ul class="social">
<li>
<a title="" data-placement="top" data-toggle="tooltip"
class="facebook" href="https://www.facebook.com">
<i class="fa fa-facebook" id="facebook-icon></i>
<span>Your Text Here</span>
</a>
</li>
</ul>
</div>
CSS:
#facebook-icon,
#facebook-icon ~ span {display:inline-block;}
How to align text next to an icon with CSS?
Approach 1: Flexbox (clean markup, dynamic icon width).
p { display: flex; width: 180px;}
p:before { content: "@"; padding-right: 4px;}
<p>The quick brown fox jumps over the lazy dog.</p>
Position icon next to text
Here is another approach with pure css.
css
.align-items {
display: flex;
justify-content: space-between;
}
.align-content {
display: flex;
}
mat-icon {
margin-right: 10px;
}
.align-text-item {
display: flex;
flex-direction: column;
align-items: center;
}
h3 {
margin-top: 0px;
}
html
<div class="align-items ">
<div class="align-text-item">
<div class="align-content">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
<div>
<h3>Customer Support</h3>
123456
</div>
</div>
</div>
<div class="align-text-item">
<div class="align-content">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
<div>
<h3>Email</h3>
123456
</div>
</div>
</div>
<div class="align-text-item">
<div class="align-content">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
<div>
<h3>Address</h3>
123456
</div>
</div>
</div>
</div>
Aligning text next to icons
My go to method for vertical aligning is using the followng styles:
.v-aligned-parent{
position:relative;//Or absolute, just not static;
}
.v-aligned{
position: absolute;
top:50%;
left: 0%;
transform:translate(0%, -50%);
-webkit-transform:translate(0%, -50%);
}
As applied to your fiddle (note i also tweaked some paddings):
https://jsfiddle.net/d5xgfkn8/
How to put the icon and the text in the same line
Try to style the i element instead. For example:
.dropbtn > i {
display: inline-block;
margin-bottom: -3px;
margin-right: 4px;
}
how to place text e.g. with h4 tag next to icon?
You can give the h4
in CSS display: flex;
and align-items: center;
. Even when the icon is larger than the text it will be centered vertically.
Here's the code example:
.bi {
font-size: 50px; /* This is only added to show the centering */
}
#testOne {
font-size: 30px;
display: flex;
align-items: center;
}
#testTwo {
font-size: 50px;
display: flex;
align-items: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<h4 id="testOne">
<i class="bi bi-alarm"></i>
Test
</h4>
<h4 id="testTwo">
<i class="bi bi-alarm"></i>
Test
</h4>
Is it possible to move my text side by side with my icon
You could wrap the two headings in a div with flex-direction: column
.
Working example:
/*-------------------------------------------- STYLING FOR CONTACT PAGE ----------------------------------------------*/
.back-container {
height: 150vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
/* Form styling for contact page */
.formContainer {
border-radius: 5px;
background-color: white;
padding: 20px;
border-left: solid 70px transparent;
border-right: solid 70px transparent;
border-bottom: solid 70px #fff;
filter: drop-shadow(0 0 30px #333);
z-index: 100;
}
.formText {
color: black;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #1e90ff;
}
.formContent {
margin-top: 5px;
}
/* Styling for the text inputs */
input[type=text] {
font-size: 20px;
border: 2px solid #ccc;
width: 250px;
height: 50px;
}
/* Styling for info div */
.info {
display: flex;
flex-direction: column;
}
.info h1 {
color: #1e90ff;
margin-left: 10px;
display: inline-block;
}
.info h2 {
color: white;
}
/* Styling for the icons */
.icons {
display: flex;
align-items: center;
}
.icons>i {
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: white;
padding: 28px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.icon-info {
display: flex;
flex-direction: column;
align-items: center;
}
/* Styling for text area */
textarea {
font-size: 15px;
border: 2px solid #ccc;
max-width: 250px;
min-width: 250px;
width: 250px;
max-height: 350px;
min-height: 100px;
height: 100px;
}
/* Styling for the submit button */
input[type=submit] {
background-color: #1e90ff;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
margin-left: 75px;
}
/*-------------------------------------------- STYLING FOR CONTACT PAGE END ----------------------------------------------*/
/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE ----------------------------------------------*/
@media (max-width: 1011px) {
.back-container {
height: 200vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
@media (max-height: 700px) {
.back-container {
height: 400vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
}
}
/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE END ----------------------------------------------*/
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<!-- Container for the entire page !-->
<div class="back-container">
<div class="info" style="float: left; padding: 150px;">
<!-- All icons being used for information !-->
<div class="icons">
<i class="fas fa-map-marker-alt fa-3x"></i>
<div class="icon-info">
<h1> Address:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<div class="icon-info">
<h1> Phone:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-phone-alt fa-3x"></i>
<div class="icon-info">
<h1> Fax:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-envelope fa-3x"></i>
<div class="icon-info">
<h1> Email:</h1>
<h2>INFO</h2>
</div>
</div>
<div class="icons">
<i class="fas fa-mail-bulk fa-3x"></i>
<div class="icon-info">
<h1> P.O Box:</h1>
<h2>INFO</h2>
</div>
</div>
</div>
<!-- Container for the forms !-->
<div class="formContainer">
<form action="https://formsubmit.co/" method="POST">
<div class="formText">
<h1>Name:</h1>
</div>
<div class="formContent">
<input type="text" name="name" required="required">
</div>
<div class="formText">
<h1>Email:</h1>
</div>
<div class="formContent">
<input type="text" name="email" required="required">
</div>
<div class="formText">
<h1>Phone Number:</h1>
</div>
<div class="formContent">
<input type="text" name="phone" required="required">
</div>
<div class="formText">
<h1>Message:</h1>
</div>
<div class="formContent">
<textarea required="required" name="message"></textarea>
</div>
<div class="formContent">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
Align Text Beside FontAwesome Icon
To have complete/independent control on the position of the font-awesome icon, try something like below.
Method 1: Using absolute positioning
Add
position with
aproperty value
ofrelative
to theh3
style to control overlap.Use
:after
selectorcontent
to insert the iconAdd
position with
aproperty value
ofabsolute
to theh3
:after block of CSS codeAchieve the desired position with left, right, top or bottom property values.
Method 2: Using float
(Easier).
Use
:after
selectorcontent
value to insert the iconAchieve the desired position of the icon by floating the
:before
selector to the right or left.
/* Using absolute positoinning */
h3.absolute { position: relative; /* Helps us control overlap */ padding-left: 25px; /* Creates space for the Phone Icon */ }
h3.absolute:before { content: '\f095'; font-family: fontAwesome; position: absolute; left: 0; /* Adjust as needed */ top: 3px; /* Adjust as needed */ } /* Using float */
h3.float { font-size: 24px; color: red; }
h3.float:before { content: '\f095'; font-family: fontAwesome; float: left; /* Depends on the side we want the icon */ margin-right: 10px; /* Creates space between the icon and the text */ font-size: 24px; height: 32px; line-height: 32px; /* Same as the font size */ } /* Below code is jsut for differentiation of methods */ strong { font-size: 24px; text-decoration: underline; display: block; width: 100%; } strong:last-of-type { color: red; }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<strong>Using absolute Positioning</strong><h3 class="absolute">Call us</h3>
<strong>Using float</strong><h3 class="float">Call us</h3>
Related Topics
Directory Chooser in HTML Page
Material Design - Stepper How to Remove/Disable Steps
Angular Detect When Scroll Reached Certain Point
Div Elements Overlapping Each Other
Why Am I Seeing a 404 (Not Found) Error Failed to Load Favicon.Ico When Not Using This
Navbar Menu Dropdown Not Working (Won't Drop Down When Clicked)
Can You Provide Some Examples of Why It Is Hard to Parse Xml and HTML With a Regex
Shape With a Slanted Side (Responsive)
Why Position:Sticky Is Not Working When the Element Is Wrapped Inside Another One
How to Run a HTML File from Terminal
Force Element to Display Outside of Overflow:Hidden
How to Make CSS Grid Items Take Up Remaining Space
How to Add HTML Line Break Within an Input Text Placeholder
Create an Object for Google Chrome
How to Display Dynamic Json Data in HTML Using Angular 6
Css - How to Have Swiper Slider Arrows Outside of Slider That Takes Up 12 Column Row