読者です 読者をやめる 読者になる 読者になる

fontello の利用でアイコンフォントを追加する時、

アイコンフォントを導入するのに便利な、http://fontello.com/ を利用した時、さらに使用するアイコンを追加する時、
どうしたら良いか?

最初にダウンロードした中に、config.json というファイルが含まれているはずなので、これをサイトにもう一度アップロードすると、
前回選択した状態になる。
f:id:posturan:20160828174809j:plain

このようにインポートをクリックしてアップロードをすると前回の選択状態になるので、これに追加して再度ダウンロードする。

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">&#xe842;</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));

のように追加する。