WordPressの管理画面で使用されているアイコンの数々、実はこれWEBフォントだって知っていました？意外と言われて気がついた方も多いのではないでしょうか。このアイコンセットは「dashicons」という名前のフォントです。そして実はこれ、ブログ上でも簡単に流用ができます。
WordPressを利用してブログを書いていて「Webフォント使いたいな」と思っている方は、まずデフォルトで読み込まれている「dashicons」を利用してみてはいかがでしょうか。
ということで、今回はWordPressにデフォルトでアップロードされている「dashicons」というWEBフォントについてです。
この記事の目次
dashiconsを使うメリット
- webフォントを新しく導入しなくてよい
- デフォルトで容易されているので指定が容易
- 知識がなくともコピペで実装できる
- FTPソフトなどでアップロードしなくて良い
- データをアップロードしないので、読み込み速度に影響がでない
Webフォント dashiconsの指定方法
※こちらはWordPressを導入されている方にのみ、当てはまる内容です。また、簡単なcssの知識が必要となります。
selector:before {
font-family: "dashicons";
content: "\f242"; // ここの指定名で、表示されるアイコンが変わります。
}
dashiconsを利用してアイコンを表示させる時は、上記のcssを[style.css]または、記事に直接記述するだけです。
記事に直接入力する場合は、テキスト表示で前後にstyle要素で囲うのをお忘れなく♪
<!-- dashiconsの呼び出し -->
<link rel="stylesheet" href="http://nkmrkisk.com/wp/wp-includes/css/dashicons.min.css">
<!-- dashiconsの呼び出し -->
<style>
selector:before {
font-family: "dashicons";
content: "\f242"; // ここの指定名で、表示されるアイコンが変わります。
}
</style>
指定可能なアイコン一覧
それでは、利用できるアイコンを一覧で見ていきましょう
※アイコンをクリックすると、[content]の指定が表示されます。上で紹介したCSSの記述を変更してご利用ください。
selector:before {
content: "\f100";
}
selector:before {
content: "\f101";
}
selector:before {
content: "\f102";
}
selector:before {
content: "\f103";
}
selector:before {
content: "\f104";
}
selector:before {
content: "\f105";
}
selector:before {
content: "\f106";
}
selector:before {
content: "\f107";
}
selector:before {
content: "\f108";
}
selector:before {
content: "\f109";
}
selector:before {
content: "\f110";
}
selector:before {
content: "\f111";
}
selector:before {
content: "\f112";
}
selector:before {
content: "\f113";
}
selector:before {
content: "\f115";
}
selector:before {
content: "\f116";
}
selector:before {
content: "\f117";
}
selector:before {
content: "\f118";
}
selector:before {
content: "\f119";
}
selector:before {
content: "\f120";
}
selector:before {
content: "\f121";
}
selector:before {
content: "\f122";
}
selector:before {
content: "\f123";
}
selector:before {
content: "\f125";
}
selector:before {
content: "\f126";
}
selector:before {
content: "\f127";
}
selector:before {
content: "\f128";
}
selector:before {
content: "\f129";
}
selector:before {
content: "\f130";
}
selector:before {
content: "\f132";
}
selector:before {
content: "\f133";
}
selector:before {
content: "\f134";
}
selector:before {
content: "\f135";
}
selector:before {
content: "\f136";
}
selector:before {
content: "\f138";
}
selector:before {
content: "\f139";
}
selector:before {
content: "\f140";
}
selector:before {
content: "\f141";
}
selector:before {
content: "\f142";
}
selector:before {
content: "\f145";
}
selector:before {
content: "\f147";
}
selector:before {
content: "\f148";
}
selector:before {
content: "\f154";
}
selector:before {
content: "\f155";
}
selector:before {
content: "\f156";
}
selector:before {
content: "\f157";
}
selector:before {
content: "\f158";
}
selector:before {
content: "\f159";
}
selector:before {
content: "\f160";
}
selector:before {
content: "\f161";
}
selector:before {
content: "\f163";
}
selector:before {
content: "\f164";
}
selector:before {
content: "\f165";
}
selector:before {
content: "\f166";
}
selector:before {
content: "\f167";
}
selector:before {
content: "\f168";
}
selector:before {
content: "\f169";
}
selector:before {
content: "\f171";
}
selector:before {
content: "\f172";
}
selector:before {
content: "\f173";
}
selector:before {
content: "\f174";
}
selector:before {
content: "\f175";
}
selector:before {
content: "\f176";
}
selector:before {
content: "\f177";
}
selector:before {
content: "\f178";
}
selector:before {
content: "\f179";
}
selector:before {
content: "\f180";
}
selector:before {
content: "\f181";
}
selector:before {
content: "\f182";
}
selector:before {
content: "\f183";
}
selector:before {
content: "\f184";
}
selector:before {
content: "\f185";
}
selector:before {
content: "\f200";
}
selector:before {
content: "\f201";
}
selector:before {
content: "\f203";
}
selector:before {
content: "\f204";
}
selector:before {
content: "\f205";
}
selector:before {
content: "\f206";
}
selector:before {
content: "\f207";
}
selector:before {
content: "\f208";
}
selector:before {
content: "\f209";
}
selector:before {
content: "\f210";
}
selector:before {
content: "\f211";
}
selector:before {
content: "\f212";
}
selector:before {
content: "\f213";
}
selector:before {
content: "\f214";
}
selector:before {
content: "\f215";
}
selector:before {
content: "\f216";
}
selector:before {
content: "\f217";
}
selector:before {
content: "\f218";
}
selector:before {
content: "\f219";
}
selector:before {
content: "\f220";
}
selector:before {
content: "\f221";
}
selector:before {
content: "\f222";
}
selector:before {
content: "\f223";
}
selector:before {
content: "\f224";
}
selector:before {
content: "\f225";
}
selector:before {
content: "\f226";
}
selector:before {
content: "\f227";
}
selector:before {
content: "\f228";
}
selector:before {
content: "\f229";
}
selector:before {
content: "\f230";
}
selector:before {
content: "\f231";
}
selector:before {
content: "\f232";
}
selector:before {
content: "\f233";
}
selector:before {
content: "\f234";
}
selector:before {
content: "\f235";
}
selector:before {
content: "\f236";
}
selector:before {
content: "\f237";
}
selector:before {
content: "\f238";
}
selector:before {
content: "\f239";
}
selector:before {
content: "\f240";
}
selector:before {
content: "\f242";
}
selector:before {
content: "\f301";
}
selector:before {
content: "\f302";
}
selector:before {
content: "\f303";
}
selector:before {
content: "\f304";
}
selector:before {
content: "\f305";
}
selector:before {
content: "\f306";
}
selector:before {
content: "\f307";
}
selector:before {
content: "\f308";
}
selector:before {
content: "\f309";
}
selector:before {
content: "\f310";
}
selector:before {
content: "\f311";
}
selector:before {
content: "\f312";
}
selector:before {
content: "\f313";
}
selector:before {
content: "\f314";
}
selector:before {
content: "\f315";
}
selector:before {
content: "\f316";
}
selector:before {
content: "\f317";
}
selector:before {
content: "\f318";
}
selector:before {
content: "\f319";
}
selector:before {
content: "\f320";
}
selector:before {
content: "\f321";
}
selector:before {
content: "\f322";
}
selector:before {
content: "\f323";
}
selector:before {
content: "\f324";
}
selector:before {
content: "\f325";
}
selector:before {
content: "\f326";
}
selector:before {
content: "\f327";
}
selector:before {
content: "\f328";
}
selector:before {
content: "\f329";
}
selector:before {
content: "\f330";
}
selector:before {
content: "\f331";
}
selector:before {
content: "\f332";
}
selector:before {
content: "\f333";
}
selector:before {
content: "\f334";
}
selector:before {
content: "\f335";
}
selector:before {
content: "\f336";
}
selector:before {
content: "\f337";
}
selector:before {
content: "\f338";
}
selector:before {
content: "\f339";
}
selector:before {
content: "\f348";
}
selector:before {
content: "\f349";
}
selector:before {
content: "\f448";
}
selector:before {
content: "\f449";
}
selector:before {
content: "\f450";
}
selector:before {
content: "\f451";
}
selector:before {
content: "\f452";
}
selector:before {
content: "\f453";
}
selector:before {
content: "\f454";
}
selector:before {
content: "\f455";
}
selector:before {
content: "\f456";
}
selector:before {
content: "\f457";
}
selector:before {
content: "\f459";
}
selector:before {
content: "\f460";
}
selector:before {
content: "\f462";
}
selector:before {
content: "\f463";
}
selector:before {
content: "\f464";
}
selector:before {
content: "\f465";
}
selector:before {
content: "\f466";
}
selector:before {
content: "\f467";
}
selector:before {
content: "\f468";
}
selector:before {
content: "\f469";
}
selector:before {
content: "\f470";
}
selector:before {
content: "\f471";
}
selector:before {
content: "\f472";
}
selector:before {
content: "\f473";
}
selector:before {
content: "\f474";
}
selector:before {
content: "\f475";
}
selector:before {
content: "\f476";
}
selector:before {
content: "\f477";
}
selector:before {
content: "\f478";
}
selector:before {
content: "\f479";
}
selector:before {
content: "\f480";
}
selector:before {
content: "\f481";
}
selector:before {
content: "\f482";
}
selector:before {
content: "\f483";
}
selector:before {
content: "\f484";
}
selector:before {
content: "\f485";
}
selector:before {
content: "\f486";
}
selector:before {
content: "\f487";
}
selector:before {
content: "\f488";
}
selector:before {
content: "\f489";
}
selector:before {
content: "\f490";
}
selector:before {
content: "\f491";
}
selector:before {
content: "\f492";
}
selector:before {
content: "\f493";
}
selector:before {
content: "\f494";
}
selector:before {
content: "\f495";
}
selector:before {
content: "\f496";
}
selector:before {
content: "\f497";
}
selector:before {
content: "\f498";
}
selector:before {
content: "\f499";
}
selector:before {
content: "\f500";
}
selector:before {
content: "\f501";
}
selector:before {
content: "\f502";
}
selector:before {
content: "\f503";
}
selector:before {
content: "\f504";
}
selector:before {
content: "\f506";
}
selector:before {
content: "\f507";
}
selector:before {
content: "\f508";
}
selector:before {
content: "\f509";
}
selector:before {
content: "\f510";
}
selector:before {
content: "\f511";
}
selector:before {
content: "\f512";
}
selector:before {
content: "\f513";
}
selector:before {
content: "\f514";
}
selector:before {
content: "\f515";
}
selector:before {
content: "\f516";
}
selector:before {
content: "\f517";
}
selector:before {
content: "\f518";
}
selector:before {
content: "\f519";
}
selector:before {
content: "\f520";
}
selector:before {
content: "\f521";
}
selector:before {
content: "\f522";
}
selector:before {
content: "\f523";
}
selector:before {
content: "\f524";
}
selector:before {
content: "\f525";
}
selector:before {
content: "\f526";
}
selector:before {
content: "\f527";
}
selector:before {
content: "\f528";
}
selector:before {
content: "\f529";
}
selector:before {
content: "\f530";
}
selector:before {
content: "\f531";
}
selector:before {
content: "\f533";
}
selector:before {
content: "\f534";
}
selector:before {
content: "\f535";
}
selector:before {
content: "\f536";
}
selector:before {
content: "\f537";
}
selector:before {
content: "\f538";
}
selector:before {
content: "\f540";
}
selector:before {
content: "\f541";
}
selector:before {
content: "\f542";
}
selector:before {
content: "\f543";
}
おわりに
いかがでしたでしょうか？ぜひ、WordPressを導入して記事を書いたり、固定ページやテンプレートを修正する際に、「ちょっとWebフォントを使いたい」と思ったら、参考にしていただければと思います！
余談ですが、コーディングにめちゃくちゃ時間がかかりました・・・。
これ、自分でも使わなくて、かつあまり参考にされなかったらちょっと悲しくなります。せめて自分でWebフォントを使いたいときはこれを使おう・・・・ｗ