フォント アイコンの代替が必要です。そこで、SVG アイコンを作成することにしました。Grunt と https://github.com/jkphl/grunt-iconizrを使用しています。すべて正常に動作します。Grunt Iconizr を使用した出力 SCSS ファイルがあります。
初め
%icon {
background-repeat: no-repeat;
}
.icon-arrow-down {
@extend %icon;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2223.90625%22%20viewBox%3D%220%200%20512%20510%22%20enable-background%3D%22new%200%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20275.311l151.114-150.395%2054.886%2055.148-206%20205.02-206-205.02%2054.887-55.148z%22%2F%3E%3C%2Fsvg%3E");
}
2 番目の出力ファイル、最初のファイルの代替:
%icon {
background-repeat: no-repeat;
}
.icon-arrow-down {
background-position: 0 0;
@extend %icon;
background-image: url(icons/icons.svg);
}
アイコンにホバー効果を作成したい。純粋な CSS ソリューションを使用してホバー効果を行う方法はありますか? プロパティを使用してそれを行うことができることは知っていfill: #CCC;ます...ただし、HTMLコードにSVGがある場合のみです。フォント アイコンを使用する場合は、CSS の color プロパティを変更することで簡単に実行できます。によって添付されたSVGの色を変更する方法はありますbackground-image: url(...)か?