CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
user5735796
user5735796

Reputation:

Unable to move icon inside the circle

I am trying to place fa-graduation-cap inside a circle.

So, that means:

<span class="fa-stack">
  <i class="fa fa-circle fa-stack-4x text-primary"></i>
  <i class="fa fa-graduation-cap fa-2x"></i>
</span>

But it doesn't work. The output is this:

enter image description here

The graduation-cap is outside the circle. Why is that?

Note:

text-primary is the bootstrap class for color.

Upvotes: 1

Views: 254

Answers (2)

phaberest
phaberest

Reputation: 3220

You're not applying those classes in the correct way/order.

Following the code from the examples, here we go.

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x text-primary"></i>
  <i class="fa fa-graduation-cap fa-stack-1x fa-inverse"></i>
</span>

If you want it to be bigger just add a class fa-2x, fa-3x, fa-4x or fa-5x to the span, nothing else.

Check it on this fiddle.

Upvotes: 1

Wesley
Wesley

Reputation: 344

How are you trying to put the elements together with CSS ?

you probably need to position the icons individually to place them where and how you want them. This could possibly be done with the following:

.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}

you can move the icons over the screen by changing the pixels in the top value and the left value for example.

Upvotes: 0

Related Questions