how can use font awesome create circle number in has border , shadow? typical answer i've found circle number , border produces square shadow not circle shadow (at least way i'm trying it).
i found solution creating circle shadow not working #'s. producing oval, not circle.
#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 oval - not 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 circle shadow not #</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"> </span> </i> </div> </br> <div> <a href="http://codepen.io/onomicon/pen/idfld">source of circle shadow</a> </div> </body> </html>
just fulfill exact requirements of question modified answer @michael arrison make work font-awesome.
the point font-awesome css-class fa-3x uses em setting size:
.fa-3x { font-size: 3em; } hence height , of width .circle class should specified in em make whole thing work different font sizes.
and because circle of font-awesome css-class fa-circle-o not use 100% of available height , width, size of .circle class 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 stack, correct size .circle class 2.2em.
Comments
Post a Comment