CODEWITHSUNDEEP
css
Rolando
Rolando

Reputation: 62704

How to make a circle with CSS3 around font-awesome icon?

I want to make a css3 circle around the icon that I want to draw. I am using the meyers reset before any other css: http://meyerweb.com/eric/tools/css/reset/reset.css

and I am unable to get the effect I want. This is my css:

i {
  display: inline-block;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 50px;
  -moz-box-shadow: 0px 0px 2px #888;
  -webkit-box-shadow: 0px 0px 2px #888;
  box-shadow: 0px 0px 2px #888;
border: 3px solid red;
}

<i>H</i>

If possible to make this responsive. What is the best way to do this? If possible, it would be nice to have the circle and text resize on its own as the user resizes

Upvotes: 3

Views: 16934

Answers (4)

Deepak Yadav
Deepak Yadav

Reputation: 7109

if you want to make it responsive, then you shouldn't be using that border-radius:60px or whatver, for circle, border-radius:50% works perfect

Now to give your Font-Awesome icons a circular background effect, you can work it out this way:

.fa {background: #fcc;
padding: 1em;
text-align: center;
display: inline;
border-radius: 50%;}

but the problem here is, that the font-awesome icons aren't of equal width or height, so you may have issue of skewed circle (ellipse shape)

to prevent that, you can give some fix like:

 .fa {background: #fcc;
    padding: 1em;
    width:50px; /** fix width ***/
    text-align: center;
    display: inline;
    border-radius: 50%;
    line-height: 50px;  /** for vertical center - if needed **/
}

then using media query, you can alter these properties for different screen resolutions.

Upvotes: 6

WNDRMNT
WNDRMNT

Reputation: 43

One take on this is not trying to match your padding / border / background, etc. on the size of the icon itself. By isolating the two, you can control the font size of the icon for responsive purposes along with the round, background appearance separately.

Here's the codepen: http://codepen.io/wndrmnt/pen/NPOarV

HTML

<ul class="list">
  <!-- Facebook Icon -->
  <li class="list__item social">
    <a href="#facebook" class="list__icon list__icon_social"><i class="icon_social fa fa-facebook-square"></i></a>
  </li>
  <!-- Child Icon -->
  <li class="list__item">
    <a href="#facebook" class="list__icon list__icon_social"><i class="icon_social fa fa-child"></i></a>
  </li>
  <!-- PayPal Icon -->
  <li class="list__item">
    <a href="#facebook" class="list__icon list__icon_social"><i class="icon_social fa fa-cc-paypal"></i></a>
  </li>

</ul>

CSS

/* Remove default list styling */
ul { 
  margin: 0;
  list-style: none;
  padding: 0;
}

.list {}

.list__item {
  display: inline-block;
}

.list__icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.list__icon_social {
  text-align: center;
  border-radius: 50%;
  background-color: #0066FF;
  color: #fff;
  padding: 3rem;
  font-size: 2rem;
}

.icon_social {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 2

crazymatt
crazymatt

Reputation: 3286

Another option would be to have 2 separate layers; one for the circle and another for the font awesome want to use. Here is the code:

.circle{
    border:2px solid orange;
    background-color:gray;
    border-radius:100px;
    width:100px;
    height:100px;
    text-align:center;
}

.fa {
    color:white;
    line-height:100px;
}

And the HTML

<div>
    <div class="circle">
    <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

Also here is the jsfiddle but obviously the awesome fonts are not working there. BTW this is not a responsive solution.

Upvotes: 1

Mohd. Shaukat Ali
Mohd. Shaukat Ali

Reputation: 752

Simple theory to make a circle is you need to define value for height, width and radius must be equal. i.e. height: 50px, width:50px and border-radius:50px.

Upvotes: 0

Related Questions