HTMLブロック内でfontawesomeを使う

fontawesomeとは下で示す通りアイコンの様なフォントです。
  

fontawesomeについての参考: http://ja.scp-wiki.net/forum/t-2296012

HTMLブロック等でfontawesomeを使う場合はHTMLブロック内でSCP財団のCSSをインポートします。

ソースコード:

[[html]]
<style>
 @import url(http://scp-jp.wdfiles.com/local--theme/scp-sigma-9-off-canvas/style.css);
</style>
<div style="text-align:center">
    <span class="fa fa-spinner fa-pulse fa-5x" style="color:#999;"></span>
</div>
[[/html]]

出力:

下記の文でも同様にhtmlブロック内でfontawesomeを使用する事ができます。

ソースコード: HTMLブロック高さ調整用スクリプトに使われているCSSを使う

[[html]]
<style>
 @import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
</style>
<div style="text-align:center">
    <span class="fa fa-spinner fa-pulse fa-5x" style="color:#999;"></span>
</div>
[[/html]]

出力:

ソースコード: 直接fontawesomeを埋め込む。

[[html]]
<style>
 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
</style>
<div style="text-align:center">
    <span class="fa fa-spinner fa-pulse fa-5x" style="color:#999;"></span>
</div>
[[/html]]

直接fontawesomeを埋め込んだ場合、SCP財団が導入しているfontawesomeとバージョンが違ってしまう場合もあるのでご注意ください。
ただしfontawesomeをフル活用したい場合はこの方法で最新バージョンのfontawesomeを導入した方が使えるフォントの種類も増える為おすすめです。

事実この記事の冒頭で表示しているfa-handshake-oはSCP財団が導入しているバージョン4.3.0では使用できません。

もしfontawesomeの最新バージョンを使いなおかつSCP財団風のCSSをHTMLブロック内で用いる場合は

[[html]]
<style>
@import url(http://scp-jp.wdfiles.com/local--files/japanese-syntax/scp-WikidotCss.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
</style>
<div style="text-align:center">
    <span class="fa fa-spinner fa-pulse fa-5x" style="color:#999;"></span>
</div>
[[/html]]

の様に、2つのCSSをインポートしてください。
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License