カラーミーSEO+で利用できるSVGアイコン

＊当記事はカラーミーSEO+テンプレート限定の内容です。他テンプレートでは利用できませんのでお気を付けください。

カラーミーSEO+では各パーツにSVGアイコンを入れています。

< use >タグを利用すれば好きな場所にアイコンを呼び出せますので、カスタマイズやフリーページ作成の際など、使えそうであればお役立てください。

svgアイコンの呼び出しかた

<svg role="img">
 <use xlink:href="#■■■"></use>
</svg>

#■■■ の部分に呼び出したいアイコン名を入力します（下表参照）

#icon-home

#icon-cart

#icon-tag

#icon-heart

#icon-star

#icon-mail

#icon-list

#icon-folder

#icon-question

#icon-search

#icon-batu

#icon-menu

#icon-plus

#icon-minus

#icon-smile

#icon-fb

#icon-tw

#icon-li

SVGアイコンのCSS編集

アイコンの大きさはwidth・height、色はcolor または fill を使ってCSS編集します。

svg{
 width: __px;
 height: __px;
 fill: currentColor;
}

* fill (塗りつぶし)プロパティでcurrentoColor を指定すると、親要素に指定されているcolorを引き継ぎます。