[CSS]アイコンフォントをCDNで利用しよう

entypoは無料で使えるオープンソースのアイコンフォントです。サーバーにアップしないで使えるようにCDNで呼び出しましょう。jsdelivrは無料のオープンソース用のCDNです。

本家:http://entypo.com/
CDN:entypo
参照コード:リストCSS

スタイルシートにフォントファミリーを追加

CSSに以下を追加して使います。@font-face で指定しfont-familyで呼び出します。

@font-face {
font-family: 'entypo';
src: url('https://cdn.jsdelivr.net/font-entypo/0.1/dev/entypo.eot');
src: url('https://cdn.jsdelivr.net/font-entypo/0.1/dev/entypo.eot#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/font-entypo/0.1/dev/entypo.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/font-entypo/0.1/dev/entypo.woff') format('woff'),
url('https://cdn.jsdelivr.net/font-entypo/0.1/dev/entypo.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'entypo' !important;
vertical-align: baseline;
}
ソースコード装飾ならGoogle code prettify

ビフォー、アフター属性にコンテンツで追加

ユニコードでcontentに追加すると表示されます。
とりあえず以下を参照にします。
entypo実体参照リスト

.time.icon::after{
contnet:'\E771';
}
ソースコード装飾ならGoogle code prettify

CSSの後読み

外部からの呼び出しなので、先読みで速度が気になる場合には、cssを後よみにします。google speed insiteで推奨の方法があります。
[JS]CSSをwp_footで最後に読み込む

しば に更新 1581文字 740view
※この記事は2年前の記事です。内容が古い可能性があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください