Unable to position font-awesome icons

Question

I am using an icon from the font-awesome set. It is a bare minimum UX, where I am trying to position the icon on the right by using float . However, it does not float, and stays at its position. Even using other constructs like position = relative followed by adding values like 100px for top and left it does not alter its position.

Can anyone tell me what is it that I am doing wrong? Fiddle .

Answer 1

Just Target SVG Element and you will get your desire output.

svg {
  float: right;
  position: relative;
  top: 500px;
}

Answer 2

If you're using Font-awsome script ( SVG )(bottom of the body tag), then you should select it in CSS like this,

svg.fa-bars {
  float: right;
}

but if you're using Font-awsome link ( CSS )(inside the header tag), then you should select it like this,

i.fa-bars {
  float: right;
}

you can also try Developer tools and then you'll see that the icon is shown as <svg> .