Vertical Align Text After Font Icon
Copy
<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><divclass="col-md-4 wrapper"><spanclass="fa-stack fa-2x"><iclass="fa fa-circle fa-stack-2x blue"></i><iclass="fa fa-wifi fa-stack-1x white"></i></span><h4class="blue">Free wifi</h4></div>Solution 2:
Use CSS Flexbox. Make a parent <div> that wraps icon and text into it (in my case its icon-holder) and make it a flexbox container using display: flex.
Have a look at the snippet below:
.icon-holder {
display: flex; /* Flex Container */align-items: center; /* Vertically Align Content */
}
.blue {
color: #33b5e5;
}
span {
color: #fff;
}
h4 {
padding-left: 5px;
}<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><divclass="col-md-4"><divclass="icon-holder"><spanclass="fa-stack fa-2x"><iclass="fa fa-circle fa-stack-2x blue"></i><iclass="fa fa-wifi fa-stack-1x white"></i></span><h4class="blue">Free wifi</h4></div></div>Hope this helps!
Solution 3:
You can use display: flex and can do something like below :
.col-md-4 { display: flex; align-items: center; } .blue { color: blue } .white { color: white; }<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><divclass="col-md-4 wrapper"><spanclass="fa-stack fa-2x"><iclass="fa fa-circle fa-stack-2x blue"></i><iclass="fa fa-wifi fa-stack-1x white"></i></span><h4class="blue">Free wifi</h4></div>
Post a Comment for "Vertical Align Text After Font Icon"