チャレンジ：FontAwesomeが入っているんだから使おう

概要:

使い方あるんですかこれ？

チャレンジ：FontAwesomeが入っているんだから使おう

Nanimono Demonai 26 May 2017 12:30

Wikidotの機能である、と言い切るのは微妙なのですが、実はこのサイトを含めてWikidotは こういうロゴ を貼れます。

なにか使い道があるかもしれません！

---

ロゴの一覧はFontAwesomeのこちらにあります。

だいたいこんなことができます。
 fa-camera-retroをfa-2xで二倍に

  fa-spinnerをfa-spinさせる
  fa-refreshをfa-spinさせる
  fa-spinnerをfa-pulseさせる

赤のバッテンを重ねることが一番使い道があるかもしれません・
  fa-square-oの上にfa-twitter
   fa-circleの上にfa-flag
   fa-squareの上にfa-terminal
   fa-cameraの上にfa-ban
   fa-eyeの上にfa-ban

+ このポストのソースコード

Wikidotの機能である、と言い切るのは微妙なのですが、実はこのサイトを含めてWikidotは[[span class="fa fa-file-text-o fa-lg"]]@<&nbsp;>@[[/span]]こういうロゴ[[span class="fa fa-university fa-lg"]]@<&nbsp;>@[[/span]]を貼れます。使い道があるかもしれません！

ロゴの一覧は[[[http://fontawesome.io|FontAwesome]]]の[[[http://fontawesome.io/icons/|こちら]]]にあります。

だいたいこんなことができます。
[[span class="fa fa-camera-retro fa-2x"]]@<&nbsp;>@[[/span]]fa-camera-retroをfa-2xで二倍に

[[span class="fa fa-spinner fa-spin"]]@<&nbsp;>@[[/span]] fa-spinnerをfa-spinさせる
[[span class="fa fa-refresh fa-spin"]]@<&nbsp;>@[[/span]] fa-refreshをfa-spinさせる
[[span class="fa fa-spinner fa-pulse"]]@<&nbsp;>@[[/span]] fa-spinnerをfa-pulseさせる

赤のバッテンを重ねることが一番使い道があるかもしれません・
[[span class="fa-stack fa-lg"]][[span class="fa fa-square-o fa-stack-2x"]]@<&nbsp;>@[[/span]][[span class="fa fa-twitter fa-stack-1x"]]@<&nbsp;>@[[/span]][[/span]]fa-square-oの上にfa-twitter
[[span class="fa-stack fa-lg"]][[span class="fa fa-circle fa-stack-2x"]]@<&nbsp;>@[[/span]][[span class="fa fa-flag fa-stack-1x fa-inverse"]]@<&nbsp;>@[[/span]][[/span]] fa-circleの上にfa-flag
[[span class="fa-stack fa-lg"]][[span class="fa fa-square fa-stack-2x"]]@<&nbsp;>@[[/span]][[span class="fa fa-terminal fa-stack-1x fa-inverse"]]@<&nbsp;>@[[/span]][[/span]] fa-squareの上にfa-terminal
[[span class="fa-stack fa-lg"]][[span class="fa fa-camera fa-stack-1x"]]@<&nbsp;>@[[/span]][[span class="fa fa-ban fa-stack-2x" style="color:red"]]@<&nbsp;>@[[/span]] [[/span]] fa-cameraの上にfa-ban
[[span class="fa-stack fa-lg"]][[span class="fa fa-eye fa-stack-1x"]]@<&nbsp;>@[[/span]][[span class="fa fa-ban fa-stack-2x" style="color:red"]]@<&nbsp;>@[[/span]] [[/span]] fa-eyeの上にfa-ban

基本形は以下です（全角文字は半角にしてください）。「あっと<&nbsp;>あっと」の意味は、半角スペースと思ってください。

[[span class="fa リストに載っている名前 fa-lg"]@＜&nbsp;＞@[[/span]]

---

せっかくあるので使ってみませんか？フォーラムでも試せるので、上のソースコードを参照に、いろいろ試してみてください。

---

a.k.a. 鬼食料理長

Re: チャレンジ：FontAwesomeが入っているんだから使おう

C-take 26 May 2017 12:55

活用法考え中 
 

 

飲み込みが遅い場合はC-takeの脳みその設定を変更してください

 

頭をリフレッシュさせます

冗談はさておいて、検証は進んでいませんが、これらの記号はcolor:#nnn;の様に要素内の文字の色をつけたり、文字に縁取りをつけるようなstyle設定も有効なようです（効かないのもあるかは知りません）。

上記ソースコード

[[div style="background-color:#000;color:#FFF;text-align:center;ppading:3px;"]]
活用法考え中[[span style="display:block;height:1em;"]]@<&nbsp;>@[[/span]]
[[span class="fa fa-spinner fa-pulse fa-3x" style="display:block;position:relative;"]][[span style="position:absolute;top:0px;left:0px;"]]@<&nbsp;>@[[/span]][[/span]]
[[div style="height:1em;"]]
[[/div]]
[[/div]]
[[div style="background-color:#AAA;filter:dropshadow(color=#000000,offX= 0,offY=-1)dropshadow(color=#000000,offX= 1,offY= 0)dropshadow(color=#000000,offX= 0,offY= 1)dropshadow(color=#000000,offX=-1,offY= 0);-webkit-text-stroke-color: #000;-webkit-text-stroke-width: 1px;text-shadow: black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px;color:#FFF;font-size:20px;width:30px;height:30px;text-align:center;position:relative;cursor:pointer;display:inline-block;"]]
[[span class="fa fa-cog fa-lg" style="position:absolute;top:5px;left:2px;"]]@<&nbsp;>@[[/span]]
[[/div]]飲み込みが遅い場合は[[*user C-take]]の脳みそを設定を変更してください
[[div style="clear:both;"]]
[[/div]]
[[div style="background-color:#AAA;filter:dropshadow(color=#000000,offX= 0,offY=-1)dropshadow(color=#000000,offX= 1,offY= 0)dropshadow(color=#000000,offX= 0,offY= 1)dropshadow(color=#000000,offX=-1,offY= 0);-webkit-text-stroke-color: #000;-webkit-text-stroke-width: 1px;text-shadow: black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px;color:#AFA;font-size:20px;width:30px;height:30px;text-align:center;position:relative;cursor:pointer;display:inline-block;"]]
[[span class="fa fa-refresh fa-lg" style="position:absolute;top:5px;left:2px;"]]@<&nbsp;>@[[/span]][[/div]]頭をリフレッシュさせます

更に裏技
あ
下記コードの様に記述すると記号だけでなく、文字に対しても回転アニメーションをつける事ができます。

[[span class="fa fa-pulse"]]あ[[/span]]

ただ、回転は行によって、その行の中心を軸に行われるので。

+ 長い文章を回転させたりすると使い方が難しいかも知れません

長い文章が回転しているとちょっとうっとおしいじゃろ？

何に使えるかは知りません

+ 更に調子に乗ると…

衛星軌道みたいな事ができます。
 

[[span class="fa fa-refresh fa-3x fa-spin" style="display:block;position:relative;text-align:center;width:70%;margin:auto;"]][[span class="fa fa-hand-o-up fa-2x" style="display:block;position:absolute;top:0px;left:0px;"]]@<&nbsp;>@[[/span]][[/span]]

最後の編集 27 May 2017 00:18 by C-take さらに表示

Re: チャレンジ：FontAwesomeが入っているんだから使おう

Nanimono Demonai 26 May 2017 16:15

何に使えるかわからないといえば、この機能の紹介を忘れていました
滋

滋

滋

滋

滋

+ Show whatever

[[span class="fa"]]滋[[/span]]

[[span class="fa fa-rotate-90"]]滋[[/span]]

[[span class="fa fa-rotate-180"]]滋[[/span]]

[[span class="fa fa-rotate-270"]]滋[[/span]]

[[span class="fa fa-flip-horizontal"]]滋[[/span]]

---

a.k.a. 鬼食料理長

Re: チャレンジ：FontAwesomeが入っているんだから使おう

hal_aki 27 May 2017 03:18

+ ためしてみた

            

Re: チャレンジ：FontAwesomeが入っているんだから使おう

C-take 27 May 2017 04:36

何も考えず衛星みたいな動きができるって書きましたが、hal_akiさんのを見て、これSCP記事中に本当に天体の簡易モデルを載せる時や、原子（実際は3次元で動いているのは知っているけど）のモデルを載せる時に使えますね。

既にお気づきだと思いますが、（文字を回転させたのと同じ発想で）FontAwesomeの記号以外も衛生っぽい動きをさせる事が可能です。

中世の天文学で考えられたエカント点っぽい動きも可能です（でも回転速度が同じなせいでエカント点の動きは再現できていません。本当はもっとカオスな動きです）。
エカント点

+ エカント点もどき

   

ソースコードは自分でもひくくらい汚いので勘弁してください。赤が普通の軌道、黄色がエカント点もどきです。

エカント点をもっと洗練させられたら、誰かお願いします。

パッと見わからないかも知れませんが、例えるなら太陽を中心に回っている地球に、更に地球を中心に回っている月がある様に、正に銀河、惑星、衛星の様に、どんどん回転軸を設定する事が可能なんです。
ただ、どの回転軸においても回転速度が同じだから回転軸を増やしまくっても、何といえば良いのか、そこまで滅茶苦茶な動きにはならないでしょうけど。ある程度は複雑になるんじゃないでしょうか。
本当にこだわるならcssモジュール使った方が早いかも知れません。ただCSSのanimationに比べたら随分お手軽なのがポイントです。

最後の編集 27 May 2017 05:01 by C-take さらに表示

Re: チャレンジ：FontAwesomeが入っているんだから使おう

nanamati 27 May 2017 09:45

Wikidotでこういった記号などを使う事が出来るということは、記事内に使用する事も可能なんでしょうか？

Re: チャレンジ：FontAwesomeが入っているんだから使おう

inemurik 27 May 2017 10:01

文字回転、反転を異常性に活用した記事といえばSCP-621-JPがありますね。

Re: チャレンジ：FontAwesomeが入っているんだから使おう

Nanimono Demonai 27 May 2017 10:21

記事などに使うことができます。

---

a.k.a. 鬼食料理長

Re: チャレンジ：FontAwesomeが入っているんだから使おう

C-take 27 May 2017 10:23

• サンドボックスや記事内で動かす事もできます

• FontAwesomeのフォントはSIL OFL 1.1が適用されています。

これはフォントの単独の販売は許可しませんが、プログラム等に組み込んだ状態であれば販売もできるというものです。当然私達はこのフォントを販売する訳ではないので、禁止事項にひっかかりません。
クレジットを書くとしたら一般的にはCSS内にコメントアウトして書くので記事のディスカッションには書かなくて良いです。
SIL Open Font License

• FontAwesomeのCSSはMIT Licenseが適用されています。

MITライセンスは誰でも無償で無制限に使う事ができる（ただし、どこかできちんとライセンスの表示をしないといけない）というものですね。こちらもライセンスを書くとしたらCSS内にコメントアウトという形が一般的です。
MIT License

現在このSCP財団に適用されているテーマ、Sigma-9（ここでFontAwesomeがインポートされている）にはFontAwesomeへのライセンスの記述がないので、念の為加筆しておいた方が良いかも知れませんね。
sigma-9

最後の編集 27 May 2017 10:42 by C-take さらに表示

Re: チャレンジ：FontAwesomeが入っているんだから使おう

Nanimono Demonai 20 Jun 2017 16:02

サイトの便利のために、新しくCreative Commons Icons を導入しました。画像をアップロードせずとも使える点がFontAwesomeと大体同じですが、FontAwesomeよりも使える場面があるかもしれません。

ライセンス: フォント部分:CC-BY-4.0 International ,コード部分:MIT License
http://cc-icons.github.io/license/

• 使えるアイコンのリスト

サンプル

 

 

 

 

サンプルのコード

+ show block

[[div style="font-size:2em;"]]
[[span class="cc cc-cc"]]@<&nbsp;>@[[/span]]

[[span class="cc cc-by-sa"]]@<&nbsp;>@[[/span]]

[[span class="cc cc-publicdomain"]]@<&nbsp;>@[[/span]]

[[span class="cc cc-THREE"]]@<&nbsp;>@[[/span]]
[[/div]]

---

a.k.a. 鬼食料理長

最後の編集 20 Jun 2017 16:03 by Nanimono Demonai さらに表示