Align font icon right

3

I try to align a font on the right side of the screen inside a HEADER header, but I can not even use a float: right . But, there it goes to the right, but I lose the other alignment settings. I want to send those three bars to the right side. Image below:

Thisismyhtml:

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test Font</title> <!-- Link para Icon Fontes Externos --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <header> <i class="fa fa-search"></i> <h1 class="logo">Sample Sample</h1> <i class="fa fa-bars"></i> </header> </body> </html>

This is my CSS:

   *{padding: 0; 
      margin: 0;
      }

    body{
        font-family: arial, helvetica, freesans, sans-serif;
        font-style: normal;
    }

    header{
        height: 70px;
        line-height: 70px;
        background: #674323;
        color: white;
        font-size: 1.3em;
    }

    header .logo{
        text-align: center;
        display: inline-block;
        margin: 0 auto;
        text-shadow: 1px 1px 1px black;
    }

    .fa-search{
        font-size: 1.58em;
        text-align: left;
        margin-left: 20px;

    }

    .fa-bars{
        display: inline-block;
        font-size: 1.8em;
        text-align: right;
        margin-right: 20px;
        border-radius: 10px;
        background: white;
        color: #674323;
        padding: 2px 5px 1px 5px;
        box-size: border-box;
        vertical-align: middle;
    }
    
asked by anonymous 07.07.2014 / 22:41

2 answers

4

One possibility is to have this icon have a defined position, ie with position: absolute;

To do this, it would be enough to use this CSS:

 .fa-bars {
     position: absolute;
     right: 20px;
     top: 15px;

To have this effect: link

    
08.07.2014 / 10:58
2

If this is the way you want to display, just give a float: right and a margin: 15px 40px 0 0 (margin spacing is at your discretion).

    
07.07.2014 / 23:25