次のようなCSSがあります。
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
画像をFont Awesomeのアイコンに置き換えたいのですが。
CSSのアイコンを背景画像として使用する方法がわかりません。これは、CSSの前にFont Awesomeスタイルシート/フォントがロードされていると想定して実行できますか?
次のようなCSSがあります。
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
画像をFont Awesomeのアイコンに置き換えたいのですが。
CSSのアイコンを背景画像として使用する方法がわかりません。これは、CSSの前にFont Awesomeスタイルシート/フォントがロードされていると想定して実行できますか?
回答:
テキストを背景画像として使用することはできませんが、:before
または:after
疑似クラスを使用して、あらゆる種類の厄介なマークアップを追加しなくても、テキスト文字を必要な場所に配置できます。
position:relative
配置が機能するように、実際のテキストラッパーを設定してください。
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
編集:
Font Awesome v5は、古いバージョン以外のフォント名を使用しています。
font-family: "Font Awesome 5 Free"
font-family: "Font Awesome 5 Pro"
同じfont-weightプロパティも設定する必要があることに注意してください(900のようです)。
フォント名を見つけるもう1つの方法は、ページのサンプルフォントの素晴らしいアイコンを右クリックしてフォント名を取得することです(utf-8アイコンコードを見つけるのと同じ方法ですが、で見つけることができます:before
)。
font-size
です。
.backspace:before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f55a"; }
上記のDiodeusからの回答に加えて、font-family: FontAwesome
ルールが必要です(@font-face
CSSでFontAwesome のルールがすでに宣言されていると仮定)。次に、どのCSSコンテンツ値がどのアイコンに対応するかを知ることです。
私はそれらすべてをここにリストしました:http : //astronautweb.co/snippet/font-awesome/
実際、font-awesome
CSS でもアイコンスタイルを設定するための同様の戦略があります。icon
コードのクイックホールドを取得する場合は、non-minified font-awesome.css
ファイルを確認してください。各フォントが純粋であることがわかります。
上記のすべてを統合すると、次はうまく機能する最後のクラスです
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
このサンプルクラスを試すことができます。ここでアイコンのコンテンツを見つけます:http : //astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "\f007";
}
cssを使用して素晴らしいフォントを使用するには、以下の手順に従ってください-
ステップ1-CSSにFontAwesomeのフォントを追加する
/*Font Awesome Fonts*/
@font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
ステップ-2以下のcssを使用して、HTMLのクラス要素にフォントを適用する
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
そして最後に、「sorting_asc」クラスを使用して、目的のHTMLタグ/要素にCSSを適用します。
CSSにコンテンツを埋め込む必要はありません。バッジのコンテンツをfa要素内に配置してから、バッジのcssを調整できます。http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
リンクの例: https //codepen.io/bungeedesign/pen/XqeLQg
https://fontawesome.com/cheatsheet?from=ioからアイコンコードを取得し ます。
このためには、必要に応じて:beforeまたは:afterを介してcontent
属性とfont-family
属性を必須要素に追加する必要があります。
例:投稿内のすべての要素の後に添付アイコンを添付したかったa
。したがって、最初にそのようなアイコンがfontawesomeに存在するかどうかを検索する必要があります。ここで見つけた場合のように、すなわちfa fa-paperclip
。次に、そこのアイコンを右クリックし、::before
疑似プロパティに移動して、content
使用しているタグを取得します\f0c6
。私の場合はです。次に、これを私のcssで次のように使用します。
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
コマンドラインから次のPythonプログラムを使用して、Font-Awesomeアイコンからpng画像を作成します。