CODEWITHSUNDEEP
htmlcss
pbu
pbu

Reputation: 3060

Issue with drawing borders CSS font awesome icons

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?

Upvotes: 0

Views: 2768

Answers (2)

Aung Myo Linn
Aung Myo Linn

Reputation: 2890

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>

Upvotes: 2

musefan
musefan

Reputation: 48425

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

Upvotes: 2

Related Questions