Можем ли мы добавить границу вокруг значка font-size, используя css?

Ответ 1

Да, ты можешь. Используйте текстовую тень:

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

Или также вы можете использовать текстовый штрих webkit, помните, что он работает только с Chrome и Safari

Пример CSS-хитрости

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

Ответ 2

Начиная с версии 5.0.6, Font Awesome использует svg и path для рисования своих значков. Немного помогая инструменту Inspect Element, вот как я устанавливаю границы вокруг путей значков.

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

Ответ 3

Используйте свойство text-shadow следующим образом:

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

Ответ 4

Границы встроены - по крайней мере, с версии 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

Ответ 5

Вы можете сделать это, уложив другие значки в значок 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

Ответ 6

просто дайте класс вашей иконке в следующем стиле.

.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%; 
}

(используйте прокладки и радиус в соответствии с вашими потребностями)

Ответ 7

Нет, вы не можете с момента его части.

Однако вы можете попытаться что-то поместить над ним.