素のHTMLでのOcticonsの使い方


CSSでスタイルを指定できます。 警告のアイコン(.octicon-alert)だけ赤色にします。


アイコンのheightをemで指定すれば、親要素の文字の大きさに応じてアイコンの大きさも変わります。


アイコンのcolorを指定しなければ親要素の指定を引き継ぎます。
これは fill: currentColor のおかげです。
マウスオーバーしてください


hover擬似クラスだけでなく、JavaScriptでも動的に変化させることができます。
下記のアイコンをマウスオーバーしてください。


欠点の一つに、text-shadowを使えないという点があります。
たとえば、FontAwesomeならば下記のように影をつけられます。
通常のテキスト

しかし、Octiconsでは不可能です。
下記でもtext-shadowを使っていますが、SVGなので全く反映されません。
通常のテキスト

box-shadowでは長方形の画像の領域に沿った影しかつけられません。
通常のテキスト