CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Louis Caponi
Louis Caponi

Reputation: 11

Adding icon to Bootstrap tab

This may seem trivial, but I am trying to add an icon to a bootstrap tab but I'm having style issues.

Looking for a CSS solution with the following:

  1. Icon must float to the right of the link.

  2. CANNOT put the icon inside the anchor tag, they must remain at same level.

    <a></a><i></i>

    jsfiddle

If anyone can solve this, it'd be greatly appreciated.

Upvotes: 1

Views: 623

Answers (1)

Henrique M.
Henrique M.

Reputation: 502

Because Bootstrap styles the a inside the tab li, you must then redesign the tab to apply the style not to the a but to the li.

If you can't do that, then you should wrap the icon inside the a.

You can try add:

display: inline-block;

to your a inside the li tag.

nav>li>a {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
}

Upvotes: 1

Related Questions