Добавить рамку вокруг иконки font-awesome (v5)

Этот вопрос уже задавался в этом сообщении. Но я не думаю, что он все еще работает с новым потрясающим шрифтом, потому что они используют элементы svg и path.

Этот вопрос касается наличия рамки вокруг значка, а не вокруг внешнего круга.

Некоторые из найденных решений, которые я пробовал, но не работали:

.fa-female, .fa-music{
  color: #BBB;
}

.fa-female{
  -webkit-text-fill-color: #BBB;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke:4px #00FF00;
}

.fa-music{
  text-shadow: 0px 0px 3px #00FF00;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
<!-- Female Icon --> 
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
  <i class="fas fa-circle"></i>
  <i class="fas fa-female fa-inverse" data-fa-transform="shrink-6 fa-border"></i>
</span>

<!-- Music Icon --> 
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
   <i class="fas fa-circle"></i>
   <i class="fas fa-music fa-inverse" data-fa-transform="shrink-8 fa-border"></i>
</span>

<i class="fas fa-music fa-inverse fa-5x" style="color: black;"></i>

Изменить: решение, которое работало во фрагменте кода
Решение от reiallenramos

.fa-music g g path {
  stroke: black;
  stroke-width: 10;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<!-- Music Icon --> 
<span class="fa-layers fa-fw fa-8x" style="color: rgb(190, 53, 48)">
   <i class="fas fa-circle"></i>
   <i class="fas fa-music fa-inverse" data-fa-transform="shrink-8 fa-border"></i>
</span>


css font-awesome font-awesome-5
person Jeremy    schedule 02.02.2018    source источник
comment
TL;DR попробуйте fa-border. Источник: fontawesome.com/how-to-use/ svg-with-js#bordered-pulled-icons   -  person Ron van der Heijden    schedule 02.02.2018
comment
Да, и это не работает, я добавлю это в код.   -  person Jeremy    schedule 02.02.2018
comment
Ах I C, позвольте мне ответить на него для вас.   -  person Ron van der Heijden    schedule 02.02.2018

Ответы (4)


arrow_upward
16
arrow_downward

Мне пришлось вскрыть внутренности font-awesome.

.fa-music g g path {
  stroke: black;
  stroke-width: 10;
}
person reiallenramos    schedule 02.02.2018
comment
Не вокруг кругов, а вокруг икон. - person Jeremy; 02.02.2018
comment
ой, извини. Дай мне попробовать снова - person reiallenramos; 02.02.2018
comment
Спасибо, это сработало! Удивительно, я пытался почти больше часа. Тай - person Jeremy; 02.02.2018
comment
Рад помочь :) Быстрый совет: используйте инструмент Inspect Element в своем браузере. Это дает вам больше информации и идей о том, как подойти к вашей проблеме - person reiallenramos; 02.02.2018
comment
Да, я использую это, но я понятия не имел, что могу стилизовать path - person Jeremy; 02.02.2018

arrow_upward
6
arrow_downward

Новый способ FontAwesome — это слои: https://fontawesome.com/how-to-use/svg-with-js#layering

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
<span class="fa-layers fa-fw fa-5x">
   <i class="fas fa-circle" style="color:black"></i>
   <i class="fas fa-circle" data-fa-transform="shrink-3" style="color:Tomato"></i>
   <i class="fa-inverse fas fa-female" data-fa-transform="shrink-6"></i>
</span>

person Ron van der Heijden    schedule 02.02.2018

arrow_upward
3
arrow_downward

Пожалуйста, сделайте цвет обводки таким же, как у фонового значка значка, тогда он будет виден, как будто обводка значка уменьшена.

Пожалуйста, попробуйте использовать стиль ниже.

-webkit-text-stroke:4px rgb(190, 53, 48)

person subir biswas    schedule 02.02.2018

arrow_upward
-1
arrow_downward

Полагаю, вам нужна круглая рамка вокруг красного значка?

Вы можете добавить новый круг внутри диапазона слоев:

        <!-- Music Icon -->
    <span class="fa-layers fa-fw fa-8x fa-border" style="color: rgb(190, 53, 48)">
         <i class="fas fa-circle" style="color: black"></i>
        <i class="fas fa-circle" data-fa-transform="shrink-1"></i>
       <i class="fas fa-music fa-inverse" data-fa-transform="shrink-8"></i>
    </span>
person Steven Kuipers    schedule 02.02.2018