Html - How to Get My Text Next to My Icon

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;
}

HTML Sample Image 2

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

  1. Add position with a property value of relative to the h3 style to control overlap.

  2. Use :after selector content to insert the icon

  3. Add position with a property value of absolute to the h3 :after block of CSS code

  4. Achieve the desired position with left, right, top or bottom property values.

Method 2: Using float(Easier).

  1. Use :after selector content value to insert the icon

  2. Achieve 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



Leave a reply



Submit