「Font Awesome」でアイコンフォントを表示している方が多いと思いますが、
- LINE
- Feedly
- はてなブックマーク
などのアイコンがないので、違うものを使ったり、Font Awesomeと併用している方も中にはいるかと思います。
例えば、「IcoMoon」というサービス。
Font Awesomeにはないアイコンがたくさんあるので当サイトでも使っています。
今回は、そのIcoMoonをAMPページにも表示させる方法をご紹介します。
AMP用のstyleタグに記述
通常は、IcoMoonのサイトからダウンロードしたフォルダをアップロードし、
<link rel="stylesheet" href="https://lalala.com/wp-content/themes/4536/css/icomoon/style.css">のようにheadタグ内にパスを記述しますが、AMPに対応させるにはIcoMoonフォルダの中にあるstyle.cssの中身を丸々<style amp-custom>タグ内にコピペします。
その後、
- パスの変更
- !importantが記述されているコメント部分を削除
と進めば導入は完了です。
パスはテーマディレクトリを関数で取得してもOK
当サイトはWordPressで構築しているんですが、urlの部分は
src: url('https://lalala.com/wp-content/themes/4536/css/icomoon/fonts/icomoon.eot?ay1q6x');ときちんと記述しなくても、以下のように関数を使って取得することもできます。
src: url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.eot?ay1q6x');自作テーマなどで使う場合は後者のやり方で読み込みましょう。
サンプルコード
以下がIcoMoonをAMPで使うためのサンプルコードです。
@font-face {
font-family: 'icomoon';
src: url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.eot?ay1q6x');
src: url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.eot?ay1q6x#iefix') format('embedded-opentype'),
url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.ttf?ay1q6x') format('truetype'),
url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.woff?ay1q6x') format('woff'),
url('<?php echo get_template_directory_uri(); ?>/css/icomoon/fonts/icomoon.svg?ay1q6x#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-hatena:before {
content: "\e902";
}
.icon-feedly:before {
content: "\e901";
}
.icon-line:before {
content: "\e900";
}他のWEBフォントも読み込める
ちなみに、制限の多いAMPですが、実は、IcoMoonに限らず様々な外部WEBフォントが使えます。
そのやり方は別記事でまとめているのでぜひ参考にしていただければと思います。
