CODEWITHSUNDEEP
htmlcssfont-awesome
spottedmahn
spottedmahn

Reputation: 15981

Font-Awesome Circle with a Number and Shadow

How can I use font awesome to create a circle with a number in it that has a border and a shadow? The typical answer I've found for a circle with a number and a border produces an square shadow not a circle shadow (at least the way I'm trying to do it).

I found a solution for creating a circle with a shadow but it is not working for #'s. It is producing an oval, not a circle.

enter image description here

#blah {
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
}

.icon-wrapper {
  display: inline-block;
}

.page-number-core {
  border: 3px solid #fff;
  padding: 10px;
  -webkit-border-radius: 1100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.fix-editor {
  display: none;
}

.bold {
  font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>
  <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class='bold'>Incorrect shadow</div>
  </br>
  <div>
    <span class="fa-stack fa-3x">
        <i id='blah' class="fa fa-circle-o fa-stack-2x"></i>
        <strong class="fa-stack-1x">1</strong>
      </span>
  </div>
  </br>
  <div class='bold'>Produces an Oval - Not a Circle</div>
  </br>
  <div class="icon-wrapper">
    <i class="fa page-number-core page-number-dark">
            <span class="page-number-text page-number-text-light">1</span>
        </i>
  </div>
  <br/><br/>
  <div class='bold'>Produces an Circle with Shadow but not for a #</div>
  </br>
  <div class="icon-wrapper">
    <i class="fa fa-comment page-number-core page-number-dark">
            <span class="page-number-text page-number-text-light fix-editor">&nbsp;</span>
        </i>
  </div>
  </br>
  <div>
    <a href="http://codepen.io/Onomicon/pen/iDfld">Source of Circle with Shadow</a>
  </div>
</body>

</html>

Upvotes: 1

Views: 5541

Answers (3)

Sanjay Gupta
Sanjay Gupta

Reputation: 387

for Font-Awesome version 5 someone can use below code :

<div class="circle">
  <span class="fa-stack fa-3x">
    <i class="far fa-circle fa-stack-2x"></i>
    <strong class="fa-stack-1x">1</strong>
  </span>
</div>

Upvotes: 0

ltlBeBoy
ltlBeBoy

Reputation: 1312

Just to fulfill the exact requirements of the question I slightly modified the answer from @Michael Arrison to make it work with Font-Awesome.

The point is that the Font-Awesome CSS-class fa-3x uses em for setting the size:

.fa-3x {
  font-size: 3em;
}

Hence the height and of width the .circle class should also be specified in em to make the whole thing work with different font sizes.

And because the circle of the Font-Awesome CSS-class fa-circle-o does not use 100% of the available height and width, the size of the .circle class is 5.1em instead of 6em.

.circle {
  display: flex;
  border-radius: 50%;
  width: 5.1em;
  height: 5.1em;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
  -moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
  box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
}
<div class="circle">
  <span class="fa-stack fa-3x">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <strong class="fa-stack-1x">1</strong>
  </span>
</div>

Hint:

When using fa-lg instead of fa-3x for the stack, the correct size for the .circle class is 2.2em.

Upvotes: 4

Michael Arrison
Michael Arrison

Reputation: 1553

GCyrillus has it correct. To make the container a circle, a fixed width and height are necessary. Since you are just looking for a number, fontawesome has nothing to do with this. Here's a flexbox example:

.circle {
  display: flex;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
}
<div class='circle'>
  <div>1</div>
</div>

Upvotes: 4

Related Questions