見出し画像

【Asciidoc】TIP拾い ー アイコン表示 ー

「なくてもいいけどあるから使う。」タイプの道具集
今回は、訓示ブロックでも利用されているアイコンの表示。
あまり利用頻度は高くないハズ?。

取り敢えず、文頭に

:icons: font

を設定しておきます。

さて、

:icons: font

icon:lightbulb-o[] TIPアイコンが表示できたでしょうか?

====
icon:lightbulb-o[3x,role=left]
 訓示ブロックはこんな操作を楽にするため作られたのでしょう +
 [3x,role=left]

====

変換すると、

表示例

構文は
 icon: タグ[属性]
  タグはアイコン名
  属性は大きさ、役割(色、ポジション)等
となってます。
「Asciidocter」の場合、アイコンは「Font Awesome Icons」フォントを利用します。どのようなものが利用できるかは下記サイトから確認してみてください。アイコン名を指定して色々試すとなかなか面白い。

(他のパーサーを利用するとこれを利用していない場合もあるので注意。)
試しに箇条書きのバレットとして利用してみましょう。

:icons: font

[%hardbreaks]
icon:heart[fw,role=red] 箇条書き1
icon:diamond[fw,role=blue] 箇条書き2

表示すると

バレット例

箇条書き利用の場合はサイズを「nx」(n倍)で調整するのではなく「fw」(フォントウェイト)とするとフォントサイズを自動的に合わせてくれます。あと、「role」を利用して、色の変更やポジションを設定することが出来ます。
「AsciiDoc Language Documentation」には「反転」や「リンク」、「代替えテキスト」を設定する方法も用意されています。

此処まで書いていて、アイコンの「フォント」モードと「イメージ」モードを混在させるには工夫が必要そうだと気が付きました。「属性」の「切替変更」が上手く機能するかはそのうち試してみます。
(利用することがないので試していません。此処で思い付いたのでそのうち・・・)

さて、今回はこのあたりまで・・・・・・
次回は、「脚注」について。
…ではまた。
当Noteは下記の「AsciiDoc Language Documentation」の文法に従っています。


いいなと思ったら応援しよう!