【Simplicity】FontAwesomeを使って記事を装飾する方法

スポンサーリンク

FontAwesome(アイコンフォント)とは

SimplicityでFontAwesomeを使うには

FontAwesomeを使って記事を装飾する方法

Font Awesome Icons

ピン(赤字)「
ピン(24px)「

Simplicityで使われているFontAwesomeのアイコンを変更する方法

「トップへ戻るボタンのアイコン」、「メニューボタンのアイコン」を変更する

それ以外の、テーマ内アイコンを変更する

これらは、僕もデフォルトのアイコンが最適だと思うので、あまり変更する人はいないかもしれませんが、人と違うアイコンにして変化をつけたり、このカスタマイズ方法を別のことに応用することもできるので、一応説明しておきます。

.fa-clock-o:before {
 content: "\f133";
}

FontAwesomeのアイコンのUnicodeを調べる方法

Font Awesome Icons

「補足情報(i),(?),(!)」のアイコンを変更する

補足情報(i):class=”information”
補足情報(?):class=”question”
補足情報(!):class=”alert”

変更例

.question::before {
 content: '\f29c';
}

.alert::before {
 content: '\f071';
}

さいごに

外部リンク用

コピペでできるボックスデザインサンプルとビジュアルエディタへのボタン追加方法(CSS)

Comments

タイトルとURLをコピーしました