CODEWITHSUNDEEP
htmlcssfont-awesome
NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5153

Unable to position font-awesome icons

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.

Upvotes: 2

Views: 379

Answers (2)

Amini
Amini

Reputation: 1792

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

Upvotes: 2

Shoaib Arif
Shoaib Arif

Reputation: 807

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

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

Upvotes: 2

Related Questions