アイコンフォントを導入するのに便利な、http://fontello.com/ を利用した時、さらに使用するアイコンを追加する時、
どうしたら良いか?
最初にダウンロードした中に、config.json というファイルが含まれているはずなので、これをサイトにもう一度アップロードすると、
前回選択した状態になる。
このようにインポートをクリックしてアップロードをすると前回の選択状態になるので、これに追加して再度ダウンロードする。
config.json は、常に管理して、ダウンロードの度に、以下 css と font ファイルを上書きすれば良い。
animation.css
fontello.css
fontello-codes.css
fontello-embedded.css
fontello-ie7.css
fontello-ie7-codes.css
fontello.eot
fontello.svg
fontello.ttf
fontello.wof
fontello.woff2
<i class="icon"></i>
@font-face{ font-family: 'fontello'; src: url('font/fontello.eot'); src: url('font/fontello.eot#iefix') format('embedded-opentype'), url('font/fontello.woff') format('woff'), url('font/fontello.ttf') format('truetype'), url('font/fontello.svg#fontello') format('svg'); font-weight: normal; font-style: normal; } .icon{ font-family: "fontello"; font-style: normal; font-weight: normal; font-size: 24px; display: inline-block; text-decoration: inherit; }
さらに、色やマスクによるグラデーションなら、この .icon 属性に、
color: #00b0ff; -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,24));
のように追加する。