CODEWITHSUNDEEP
cssfont-awesome
stig
stig

Reputation: 1220

Double circle stack using font awesome

Is there an easy way to make a double circle around a number with the font awesome circle-thin icon? I also want to be able to maybe change to using the square-o icon instead.

Here is a Plunker example but this is only perfect at certain resolutions and I also want the lines to be same width: https://plnkr.co/edit/M9Dku94gApyxQ8zBzrVw?p=preview

.double {
  top: -4.3px;
  left: -1.9px;
  font-size: 2.6em;
}

<span class="fa-stack fa-1x">
  <i class="fa fa-circle-thin fa-stack-2x double"></i>
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <strong class="fa-stack-1x">4</strong>
</span>

Upvotes: 0

Views: 611

Answers (2)

MaxW
MaxW

Reputation: 421

<style>
  .double {
    top: -0.0px;
    left: -0.0px;
    font-size: 1.4em;
  }
</style>

  <body>

    <span class="fa-stack fa-2x">
      <i class="fa fa-circle-o fa-stack-1x double"></i>
      <i class="fa fa-circle-thin fa-stack-2x "></i>
      <strong class="fa-stack-1x">4</strong>
    </span>

you could use fa-cicle-o and circle-thin

edit: looks better now with style added

Upvotes: 0

monkeyinsight
monkeyinsight

Reputation: 4859

you can try scale, since px is not very good

.double { transform: scale(1.3); }

Upvotes: 1

Related Questions