web-dev-qa-db-ja.com

CSSを使用してfontawesomeアイコンの周囲に境界線を追加できますか？

アイコンの境界線の幅を変更する必要があります-fa-comment-o。 cssでボーダー幅のサイズを変更できますか？

cssiconsborder
23
Anil Maharjan

はい、できます。テキストシャドウを使用します。

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

または、webkitテキストストロークを使用することもできますChromeおよびSafari

CSS-Tricksの例

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

V5.0.6以降、Font Awesomeはsvgsとpathsを使用してアイコンを描画します。 Inspect Elementツールの助けを借りて、アイコンパスの周囲に境界線を配置する方法を次に示します。

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

次のようなtext-shadowプロパティを使用します。

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

ボーダーは組み込まれています-少なくともv4.6以降。

「簡単なプル引用または記事アイコンには、fa-borderおよびfa-pull-rightまたはfa-pull-leftを使用してください。」

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

フォントが素晴らしいcssファイルでは、パディング、境界線のスタイル、色などを微調整できます。 fa-borderを検索します。

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

2
Matthew Dunn

これを行うには、fa-circleアイコンの上に他のアイコンを重ねて、形状が円形になるようにします。クラスfa-inverseを使用して色を反転することもできます。 Font Awesomeアイコンは、CSSプレフィックスfaとアイコンの名前を使用して、ほぼどこにでも配置できます。 Font Awesomeは、インライン要素で使用するように設計されています（簡潔にするために<i>タグが好きですが、<span>を使用する方が意味的に正確です）。

例とそれをもっと学ぶ 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
1
Codeone

次のスタイルでアイコンにクラスを与えるだけです。

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

（必要に応じてパディングと半径を使用します）

0
Eternal

どのように機能させるかが明確ではなかったので、機能させてからこのテストを作成しました。 Chromeで作業するには、Sawesomeバージョンのフォントawesomeをインポートする必要があります（ https://use.fontawesome.com/releases/v5.8.1/js/all.js ）。

chrome and firefoxで動作します

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vw;
  background: #aaa;
}

.fa-times path {
  stroke: white;
  stroke-width: 30px;
}
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

<i class="fa fa-times" aria-hidden="true"></i>
0
Esteban