【管理人用】アイコンの覚書

2020年06月20日
管理人用虎の巻

SVGアイコン。簡単だが位置調整はちょいと知識が必要であったIcongramについての忘備録。管理人が試行錯誤して得た結果で、これが正解ではないかもしれないので、あくまで自分用です。

使いそうなアイコンまとめ

交通

material/airplane-takeoff
material/airplane-landing
fontawesome/plane
material/parking
material/bus-stop
material/subway
material/bus-clock
material/information-outline
material/bus
material/tram
material/train
material/car

デバイス

material/camera
material/camera-off
octicons/device-camera
material/cellphone-off
feather/camera
entypo/mobile
feather/phone
entypo/laptop
material/desktop-tower-monitor
material/television-classic

ロゴ

fontawesome/file-pdf-o
devicon/chrome-original
devicon/twitter-original
simple/googletranslate
simple/line
simple/googlemaps
simple/instagram
simple/klm
fontawesome/youtube
simple/youtubetv

simpleのアイコンを色付き表示にする

<img src="https://icongr.am/simple/klm.svg?size=40&colored" alt="">

アロー

material/arrow-left-right
material/arrow-up-down
material/arrow-left-thick
material/arrow-right-thick
entypo/arrow-long-down
entypo/arrow-long-right
octicons/chevron-right
octicons/chevron-down
material/chevron-triple-down
material/chevron-triple-right
material/material/menu-right

日付と時刻

material/update
entypo/calendar
material/clock-outline

ファイナンス

material/currency-cny
material/currency-eur
material/currency-usd

生活

entypo/home
clarity/bundle
entypo/open-book
fontawesome/gift
fontawesome/edit
feather/mail
entypo/beamed-note
entypo/video
material/map-marker

その他

material/checkbox-marked-outline
material/checkbox-blank-outline
fontawesome/check
entypo/mouse-pointer
entypo/forward
material/launch
fontawesome/comment
fontawesome/comment-o
fontawesome/commenting-o
jam/search
jam/search-plus
material/loupe
entypo/emoji-happy
entypo/emoji-sad
entypo/emoji-neutral
fontawesome/question-circle-o
fontawesome/warning
entypo/new

コードの書き方

デフォルトスタイル

<img src="https://icongr.am/material/information-outline.svg" alt="">
右に余白が欲しい時は
style="margin-right: 10px;"
をつける。
※なぜかemは効かない(; ̄ェ ̄)

本文文字サイズとカラー

<img src="https://icongr.am/entypo/emoji-happy.svg?size=20&color=333333" alt="" style="vertical-align: text-bottom;">

リンクマークの場合

【読書】片手の郵便配達人 グードルン・パウゼヴァング(著)、高田 ゆみ子(訳) - 読書感想
<img src="https://icongr.am/feather/link.svg?size=20&color=c67f7b" alt="" style="vertical-align: text-bottom;">
左右に余白が欲しい時は
 style="margin: .3em;"
をa要素につける

spanで囲って位置調整

<span style="vertical-align: text-bottom; margin-left: 1em;"></span>

アイコンと文字の垂直位置を中央揃え

あいうえおかきくけこ

 style="vertical-align: middle; margin-right: 10px;"
※アイコンサイズを変更すると
vertical-align: middle;
ではうまくいかない・゚・(ノД`)・゚・

応用あれこれ

横並び…tableで配置

BS8Kの8K ヨーロッパ トラムの旅 - NHKと同じ番組内容なのかどうかは不明です。
うち8K見られない(;´・ω・)
<table style="width: 100%; border-spacing: 0;">
<tbody><tr>
<td style="width: 65px; padding-left: 1.2em; vertical-align: top;">アイコンURL</td>
<td>文章</td>
</tr></tbody></table>

横並び…インデント

乗り物酔い、頭痛に
ハンカチに一滴落として香りを吸い込む。気分転換、リフレッシュにも。

<p class="indent">アイコンURL<span style="font-weight: bold; margin-left: .5em;">太文字部分</span><br>説明部分</p>
関連記事
bon
コメント投稿について
コメントは承認制です。管理人が承認しだい表示されます。
非公開コメントもOKですのでお気軽にどうぞ。