Wiki3 Twitterアイコンなどを表示する方法 （×CSS）

•  Top
• 小技・テクニック集
• かんたん
• ▶アイコンの使い方

---

 

実行例

 牛丼チェーン完全攻略うぃき  
 

サイトマップ

Tierリスト	チェーン一覧	新メニュー評価
Tier 1  Tier 2  Tier 3  Tier 4	すきや  吉野家  なか卯  松屋	ネバトロ牛丼　　　　　　  卵とじ牛丼　　　　　　　  明太アチアチ牛丼　　　　  ビーフオアチキン海鮮豚丼

 

管理人情報
 

 twitter　 

 facebook

 

ソース

アイコン単体

<p><span class="uk-icon-home">&nbsp;</span></p>

 

アイコンボタン

<p><span class="uk-icon-button uk-icon-home">&nbsp;</span></p>

　※   はノーブレークスペースのことで、ソースコードにおける半角スペースみたいなもの。
 

 

注意

　<span></span>内には自由にテキストを挟むことができますが、
 

　必ず<span></span>内に何かしらテキストを挟んでおくことを推奨します。

　半角スペースでもノーブレークスペースでも可。

　全角スペースかノーブレークスペースが丸いです。

　何も挟まなかった場合、一度編集内容を保存したあと再度編集する時たまにソースコードが消滅します。(2敗)

 

　編集のヒント：文章中に含まれない半角スペース及び中に何も入ってない要素はWiki3の使用で消滅します。

 

　なお、アイコンボタンに限り全角スペースもしくはノーブレークスペース   を挟むと表示が少しおかしくなります。
 

正常　　　   を挟んだ時
 

　半角スペースを挟むとアイコンのずれはなくなりますが、代わりに編集するたびコードが消えるのでメンテナンスが面倒です。

 

解説

　inline要素（<span>, <a>, etc.）に class = " uk-icon " または class = " uk-icon-button " を与えアイコンの形式を宣言した上で、
 

　class = " uk-icon-アイコン名 " を追加で与えるとアイコンを表示させることができます。

 

　アイコンボタンを使わないのであれば、class = " uk-icon-アイコン名 " のみでも大丈夫です。
 

 

使えるアイコン

　使用可能なアイコンは uk-icon クラスの頒布元である Uikitの公式ページ (英語サイト) にリストが載ってます。
 

　hand-pointer-o など一部アイコンはWiki3では表示できないっぽいです。全人類手のひらがあると思うなよ？
 

 

 

 

---

ここから下は、ちょっとした追加要素の解説になります。
 

---

 

 

 

アイコンの大きさを変える

　uk-icon-サイズ名 を指定するとアイコンの大きさが変わります。ついでに要素内のテキストの大きさも変わります。

 

 デフォルト
 

 uk-icon-small
 

 uk-icon-medium
 

 uk-icon-large

 

<p><span class="uk-icon-small uk-icon-アイコン名">&nbsp;</span></p>

 

 

アイコンを整列させる

　uk-icon-justify を使うと縦書きにできます。  いや、どうつかうｎ

 

uk-icon-justify 有り	uk-icon-justify 無し
いろはにほへと ちりぬるををを	わかよたれそそ つねならむむむ

 

<p><span class="uk-icon-justify uk-icon-アイコン名">&nbsp;</span></p>

 

 

アイコンを回転させる

　uk-icon-spin を指定することでアイコンを時計回りに回転させることができます。

 

 

 

あああ

 

 

<p><span class="uk-icon-spin uk-icon-アイコン名">&nbsp;</span></p>

　uk-icon-spin クラスも uk-icon-button 同様   を挟んだ時の回転軸のズレが気になります。半角スペースを挟めばズレはなくなりますが、編集時に手直しが必要になります。