フォントを使用する代わりにボタンにSVGアイコンを使用

Question

フォントの素晴らしいアイコンを使用してボタンのオン/オフを切り替えるスクリプトがあります。

代わりに、私が作成したSVGスプライトを使用してCSSで色を変更したいと思っていますが、どのようにhtmlとCSSをSVGに反映させるかはわかりません。

他のブラウザでも動作するにはSVGが必要です。

ありがとうございました。

$('.favorite').click(function() { 
 
    $(this).toggleClass('favorited'); 
 
});

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css); 
 
html { 
 
    position: relative; 
 
    background: linear-gradient(135deg, #5ccccc 0%, #288080 100%); 
 
    height: 100%; 
 
} 
 
.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.favorite { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 40px; 
 
    color: #fff; 
 
    border: 0; 
 
    background: transparent; 
 
} 
 
.favorite:before { 
 
    content: '\f08a'; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 18px; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 9px; 
 
} 
 
.favorite.favorited:before { 
 
    content: '\f004'; 
 
    color: red; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <button class="favorite"></button> 
 
</div>

。

Answer 1

CSSを使用してSVGイメージの色を設定する最も簡単な方法は、-webkit-mask-imageプロパティを使用して色を変更することです。例はこれのようになります。

.icon { 
    background-color: red; 
    -webkit-mask-image: url(icon.svg); 
    mask-image: url(icon.svg); 
} 

Firefoxブラウザではサポートされていませんが、複数のブラウザでサポートしたい場合は、代わりにCSSフィルタを使用できます。しかし、あなたはかなりの作業である各色の設定を見つける必要があります。もっと学ぶことができますhere

私が通常やっていることは、すべてのSVG画像をfontello.comウェブサイトで通常行うフォントアイコンに変換することです。簡単で、軽量で、迅速なソリューションです。それが役に立てば幸い。