カラーミー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を引き継ぎます。

カラーミーショップsvg

Posted by ミフネWEB