CODEWITHSUNDEEP
cssglyphicons
user5406531
user5406531

Reputation:

Stacked glyphicons with Font Awesome

I have the fa-circle-thin in which i want to place a glyphicon, so that it looks like there is a round border around my glyphicon. I just want to know if this is even possible?

I've tried following: 

        <div class="col-md-4">
            <span class="circle">
                <i class="glyphicon glyphicon-star"></i>
            </span>
            <h4 class="service-heading">Lorem</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        </div>

However the two icons shows up side by side. I made a class for my FA that looks like this: 

.circle:before {
    font-family: fontawesome-webfont;
    text-decoration: none;
    content: "\f1db";
    background-color: transparent;
    z-index:-1;
}

Upvotes: 0

Views: 123

Answers (2)

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21728

I'd just use border-radius: 50% instead of trying to position two glyphs (plus you can style the border!). I'm also centering things with text-align: center and by matching the line-height and height values:

.circle {
  border: 1px solid black;
  border-radius: 50%;
  padding: 3px;
  width: 25px;
  height: 25px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
}

.alt {
    border-width: 2px;
    border-color: red;
    color: red;
    width: 15px;
    height: 15px;
    line-height: 15px;
}
<div class="circle">
  🌟
</div>

<div class="circle alt">
  🌟
</div>

Upvotes: 1

silviagreen
silviagreen

Reputation: 1729

How about using posiiton:absolute?

.glyphicon{
  position: absolute;
  top: 3px;
  left: 15px;
}

Result: jsfiddle

Upvotes: 0

Related Questions