Clever Geek Handbook

The border radius of the font hacking is awesome?

I'm trying to add border

and then border-radius

to font-awesome icon, but it shows black holes on top and bottom. Here is the image of the question

icon

i here is my CSS code

i.fa{
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    border-radius: 15px;
    border: 1px solid #fff;
    font-size: 20px;
}
+3


source to share


3 answers


You can do this by packing other icons into the icon fa-circle

so that they appear round in shape. Also the color can be inverted using the class fa-inverse

.

To stack multiple icons, use the fa-stack class for the parent, fa-stack-1x for the regular sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternate icon color. You can even throw large icon classes at the parent to gain further sizing control.

- http://fortawesome.github.io/Font-Awesome/examples/

here (smaller) social icons are stacked above the (large) icon fa-circle

. also note that this is not a square version i.e. don't use facebook-square

, twitter-square

etc.



body {
  background-color: black;
}
input {
  background-color: #E88080;
  border: 0px;
  border-radius: 10px;
}
      

        
        
        
      

    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <input type="text" />
  <span class="fa-stack">
    <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
    <i class="fa fa-search fa-stack-1x"></i>
  </span>
</div>
<div class="social">
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-linkedin fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-facebook fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
  <span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
  <i class="fa fa-instagram fa-stack-1x"></i>
</span>
</div>
<h6 style="color:white; font-family:monospace">Note that if you have ad blocking active on this page, you won't be able to see the icons.</h6>
Run code


0


source


you have to put this element in the code

overflow: hidden;

try this it may work



<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

http://fontawesome.io/examples/

+4


source


Bilal, as Suresh said, you can't use a bounding radius for a font - awesome because font-awesome is a collection of SVG images. However, you can try filling the circle on a white background by reducing the text size and making the font black.

body
{
    background: #000;
}

.button
{
    background: #FFF;
    color: #000;
    padding: 5px;
    font-size: 20px;
    border-radius: 15px;
}

Result: http://jsfiddle.net/7rjkwqft/

0


source






More articles:


All Articles