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をインポートしてください。
page revision: 9, last edited: 16 Jan 2018 14:57