Geek Answers Handbook

Can we add a border around the font-size icon using css?

I need to change the icon border width - fa-comment-o. Is it possible to change the border width size using css?

+14
source share
7 answers

Yes you can. Use a text shadow:

.my-icon {
     text-shadow: 0 0 3px #000;
}

Or also you can use the webkit text bar, remember that it only works with Chrome and Safari

CSS Trick Example

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
+33
source

Starting with version 5.0.6, Font Awesome uses svgand pathto draw their icons. Helping the Inspect Element tool a bit is how I set the borders around icon paths.

.fa-comment g g path {
  stroke: black;
  stroke-width: 10;
}
+5

text-shadow :

.my-bordered-icon{
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
+5

- , 4.6.

" fa-border fa-pull-right fa-pull-left ".

    <i class="fa fa-camera-retro fa-border"></i> fa-lg

, , css-awesome font-awesome; fa-.

http://fontawesome.io/examples/#animated

+2

, fa-circle, . , fa-inverse. Font Awesome , CSS fa . Font Awesome ( <i> , <span> ).

example lear more abbout http://fontawesome.io/examples/

, fa-lg (33%), fa-2x, fa-3x, fa-4x fa-5x.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
0

.

.fa-border-icon {
    border-width: 3px;
    border-style: solid;
    border-color: orange;
    border-image: initial;
    border-radius: 50% 50% 50% 50%; 
    padding: 6% 9% 6% 9%; 
}

(use gaskets and radius to suit your needs)

0
source

No, you cannot from the moment of its part.

However, you can try to place something above it.

-3
source

More articles:


All Articles