web-dev-qa-db-ja.com

font-awesome（v5）アイコンの周りに境界線を追加します

この質問は以前に この投稿 で尋ねられました。しかし、新しいフォントではまだ機能しているとは思いません。svg要素とpath要素を使用しているため、すばらしいです。

円ではなくアイコンの周りに配置したい。

私はこれを試しました

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

この：

text-shadow: 0px 0px 3px #000;

そしてまたこれ：

fa-border

仕方

.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>
cssfont-awesomefont-awesome-5
8
Jeremy

Font-awesomeの内部を分析する必要がありました。

.fa-music g g path {
  stroke: black;
  stroke-width: 10;
}
14
reiallenramos

新しい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>
5
Ron van der Heijden

ストロークの色をアイコンの背景アイコンと同じにしてください。そうすると、アイコンのストロークが減少したように見えます。

以下のスタイルを使用してみてください。

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

2
subir biswas

赤いアイコンの周りに丸い境界線が必要だと思いますか？

レイヤースパン内に新しい円を追加できます。

        <!-- 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>
0
Steven Kuipers