cssで文字の横に、イラストを入れる方法

appleのマークfontawsome
ホームページを見ていると、文字の横にイラストを入れている場合があります。
しかし、それは画像タグ(imgタグ)ではなく、cssで指定してある場合があります。
そのやり方は【Font Awesome】というみたいです。

実際に【Font Awesome】をやってみました。

Appleのマーク

やり方 1 :まずは【Font Awesome】公式サイトの、アイコンを見る

fontawesomeの公式サイト

2:使用したいアイコンを選択

fontawesomeのアイコンたち

使用できるのは無料版のみです。
有料版(pro)は、有料会員登録が必要になるのでご注意ください。

3:該当アイコンのIDをコピーしおておく

fontawesomeのid

4:htmlとcssを記載

【css】のcontentの部分は、先程コピーしたIDに変更してください。

 

html記述は、ホームページに直接書いて下さい。
css記述は、プラグイン「カスタムcss」などを使い、そのページに記述するといいでしょう。
customcss

当サイトのテーマ【Alpha】でも、文字の横にイラストを入れることができました!

コメントは受け付けていません。