Unable to position font-awesome icons

user_1469954 0
Viewed 101

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.

font-awesome css html
2 Answers

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

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

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

user_153512960
Related