CODEWITHSUNDEEP
cssfont-awesome
darossi
darossi

Reputation: 99

Border around individual unicode fontawesome icons?

I'm trying to add a border around individual fontawesome icons (using the Unicode codes). For example, in my CSS file I'm using:

content: "\f008\00a0\f001\00a0\f26c"

But if I try to add a border here, it puts one border around all three icons. Is there a way I can get a border around each of the three icons individually (not the 00a0 spaces).

Thank You

Upvotes: 0

Views: 1344

Answers (1)

Paulie_D
Paulie_D

Reputation: 115342

Nope...it's one element (or pseudo-element) with multiple characters...so you only get one border.

It's like trying to put a border round the individual letters in a span...can't be done.

At best, Font-Awesome offers a method of putting borders around icons using stacking but usually only for single icons. Whether you could tweak that is arguable.

Could be a fun experiment.

The way it should be done:

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
i:before {
  font-family: 'FontAwesome';
}
i.one:before {
  content: "\f008";
}
i.two:before {
  content: "\f001";
}
i.three:before {
  content: "\f26c";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa one fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa two fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa three fa-stack-1x"></i>
</span>

Upvotes: 1

Related Questions