0

i am using css awesome font icons (https://fortawesome.github.io/Font-Awesome/) and i am trying to draw circle or square borders around them using css rules. 

<i class="fa fa-check-circle fa-5x fa-square"></i>

The targeted css rules are..

.fa-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em;  }
.fa-square {   color: #b0b0b0;  border-radius:50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

The original check circle without borders looks like this.. enter image description here

The real output when drawn a border shows strange output in FF and safari enter image description here

I used this line from other thread, but it is not working.

text-rendering: optimizeLegibility;

How do i fix?

pbu
  • 2,982
  • 8
  • 44
  • 68
  • Use browser prefixes, since most of the browsers don't support the new css3 properties without prefixes. – random Sep 15 '15 at 16:08
  • 1
    Can you provide an example jsfiddle? I think this should just work, so I expect you are changing something else – musefan Sep 15 '15 at 16:09
  • 1
    possible duplicate of [Make Font Awesome icons in the round circle?](http://stackoverflow.com/questions/21905710/make-font-awesome-icons-in-the-round-circle) – Adam Buchanan Smith Sep 15 '15 at 16:17

2 Answers2

2

Please run the code snippet below,

.border-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em;  }
.border-square {   color: #b0b0b0;  border-radius:25%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-check-circle fa-3x border-circle"></i>
<i class="fa fa-check-circle fa-3x border-square"></i>
<i class="fa fa-check-square fa-3x border-circle"></i>
<i class="fa fa-check-square fa-3x border-square"></i>
Aung Myo Linn
  • 2,820
  • 3
  • 27
  • 38
2

The problem is that you are using fa-square as a class name, which is clashing with one of the existing font awesome classes. You are basically trying to merge 2 icons which is not what you want.

Instead, avoid using the same class naming convention because even if you pick a unique one, it may get used in a later version anyway.

For example, change fa-square as follows:

.my-square {   color: #b0b0b0;  border-radius:10%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

Then your html like so:

<i class="fa fa-check-circle fa-5x my-square"></i>

Here is a working example

musefan
  • 47,875
  • 21
  • 135
  • 185