1. ホーム
  2. 質問と答え
  3. FontAwesome 5正方形要素としてのSVG

FontAwesome 5正方形要素としてのSVG

2017-12-09 3 views
0

フォントawesome 5 svgを背景画像として使用しようとしています。しかし、それは表示されていない、と私は色を変更する方法を知らない。これは私が使用していますものです：FontAwesome 5正方形要素としてのSVG

.no-profile-image { 
    display: block; 
    width: 100%; 
    padding-bottom: 100%; 
    background: url('/images/fa-solid.svg#user'); 
    background-size: contain; 
    background-position: center center; 
}

私はHTMLのSVG要素としてそれを使用することができますが、私は上記の背景画像として行ったように、私は、アイテムの正方形を作ることはできません。私は、次のことを試してみましたが、要素楕円の形になり：

svg.no-profile-image { 
    width: 100%; 
    padding-bottom: 100%; 
} 

<svg class="no-profile-image"> 
    <use xlink:href="/images/fa-solid.svg#user" fill="white"></use> 
</svg>

がどのように私は私のdiv要素が正方形であるように、この背景画像にするか、四角のhtml SVG要素にすることができますどちらか？

出典

2017-12-09 Get Off My Lawn

+0

「」として使ってみましたか？アイコンとして使用しても、それは 'SVG'として変換され、' 'タグをコメントアウトするだけだからです。ライブラリは 'all.js'を行っています。 –

+0

私は 'i.no-profile-image'と' i.fa.fa-user'の両方を試しましたが、最初の画像は画像が表示されず、2番目の画像はhtmlインラインのように表示されます。 –

+0

''そのようにしてください。 "fas"は "すばらしいフォント"を意味します。 –

答えて

0

フォント恐ろしい5作業を取得するためには、まずこのような<head>でJavaScriptライブラリ含める必要がありますアイコン（この例では、ユーザのアイコン）あなたを得るために、次に

<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script> 
</head>

を次のように入力する必要があります。

<i class="fas fa-user"></i>

fasは「固体素晴らしいフォント」の略です。

現在、4種類のアイコンがあります。 Solid,Regular,LightおよびBrands。

<i>クラス内のアイコンのサイズを変更することもできます。たとえば、fa-lgと入力します。ここでそれについてもっと読む：https://fontawesome.com/how-to-use/svg-with-js

出典

2017-12-09 15:26:00

+1

私はレギュラーではなく、レトロではないと思います –

+1

あなたは正しいです、私を訂正していただきありがとうございます。 –

関連する問題

 関連する問題