Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I align Font Awesome icons to the right?

I'm trying text-align: right in my CSS, but text-align is not moving it for some reason. I want the website title left aligned and the icon right aligned on the same line. Here's what I am trying.

JS Fiddle

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="top-container">
    <h2>Website Title</h2>

    <i class="fas fa-bars"></i>
</div>

CSS

body {
  margin: 0;
}

.top-container {
    padding: 20px;
    margin: 0;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.75);
    font-size: 2em;
    font-weight: bold;
}

.top-container i {
    color: red;
    display: inline-block;
    text-align: right;
}

.top-container h2 {
    display: inline-block;
}

h2 {
  margin-top: 10px;
}
like image 509
Brandon LearnsAlot Avatar asked May 16 '18 23:05

Brandon LearnsAlot


People also ask

How do I align Font Awesome to the right?

First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-align-right to any element to add the icon. Font Awesome align right Icon can be resized as per your need. You can manage size of icon(fa fa align right) by using font-size css style.

How do I align text with font awesome icons?

If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.


2 Answers

text-align will align the text within the element which you are assigning it to, which doesn't do anything in an inline-block element like this (since that's just as wide as its contents). Use float: right; instead of text-align: right

https://jsfiddle.net/s4a9sct9/1/

like image 137
Johannes Avatar answered Sep 23 '22 16:09

Johannes


If text-align: right is not working, try float: right.

like image 25
Andrew I. Avatar answered Sep 23 '22 16:09

Andrew I.