CODEWITHSUNDEEP
cssfont-awesome
Louis W
Louis W

Reputation: 3252

Font Awesome: Stacking icons and getting pixel perfect sizing

I am trying to use the stacking technique built into Font Awesome to display small icons inside of a circle. I'd like however to have total control over the size of the circle - more so then the sizing options they have available.

I've built a proof of concept, which works, but the circle doesn't display at the desired dimensions. I have specified for it to be 60x60, however if you inspect the element the container is the correct size but the actual circle icon is inset a bit.

body {
  font-size: 12px;
  font-family: Courier;
}

.fa-stack.custom {
  font-size: 60px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  background-color: pink;
}

.fa-stack.custom .circle {
  font-size: 60px;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack custom">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

https://jsfiddle.net/louiswalch/nxo2s1gt/13/

Any ideas for getting this to work for exact pixel dimensions?

Upvotes: 3

Views: 436

Answers (1)

Temani Afif
Temani Afif

Reputation: 272909

You will have better accuracy if you consder the V5 and the SVG version. The height is defined as 2em so using 30px as font-size will give you the needed result.

.fa-stack.custom {
  font-size: 30px;
  background-color: pink;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-stack custom">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

A little bigger if you want the circle to be exactly 60px since the path doesn't cover the whole viewbox area:

.fa-stack.custom {
  font-size: 30.97px;
  background-color: pink;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-stack custom">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    
   
 <p>Below the SVG of the circle to notice the small gaps</p>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"style="border:1px solid;"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>

You can use CSS variables to make easier to handle. The value 98.66 comes from the fact that if the SVG is 100px height the path inside will be 98.66px height:

.fa-stack.custom {
  font-size: calc(var(--s)*(50/96.88));
  background-color: pink;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-stack custom" style="--s:60px">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    
    
    <span class="fa-stack custom" style="--s:70px">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    
     <span class="fa-stack custom" style="--s:100px">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

Upvotes: 1

Related Questions