最終更新日：2016-02-26
ブログ等でアイコンを追加する場合、私の場合は
自分で作ったり、
画面の一部をそのまま切り取って使ったり、
クリエイティブ・コモンズ（大雑把に言うと制作元をはっきりと明示した上で使えるもの）のアイコンを使ったりしています。
GLYPHICONS – library of precisely prepared monochromatic icons and symbols.
私自身は使っていませんが、「Gravatar プロフィール」ウィジェット等を使う方法もあります。
一方、「Web フォント」と呼ばれているものを使う方法もあるようですが、今のところ、使用の方は一部のテーマに限られているようです。
WordPress.com で表示可能な Web フォントには２種類あるようで、ひとつは「Noticons」、もうひとつは「Genericons」と呼ばれているようです。
Noticons
Noticons の方は、WordPress.com の著作権マークが付いているので、誰でも自由に使えるものではないようです。
こんな断り書きもあります。
Use Genericons for themes and other projects.
Noticons
一方、WordPress.com のフォーラムの方を見てみると、Noticons は管理画面での使用を想定しており、そのせいかログインしている状態でしか表示されないようです。
At this time, Noticons are only used for system-level items at WordPress.com (The Dashboard, Notifications, Reader, Stats, admin bar, etc), so they are only loaded for logged in users.
Noticons « WordPress.com Forums
一方、Genericons というのは「GPL」と書いてあるので、使用の際にその旨コード等に記載しておけば、誰でも自由に使えるもののようです。
Genericons – a free, GPL, flexible icon font for blogs!
これら２つの Web フォントをテーマ「BonPress 」で表示するとこんな感じです（noticons の方は１個だけ）。
記事の方にはこんな感じのものを追加し、
<h4>genericon</h4>
/* Post formats */
<div style="font-family: 'Genericons';">
<div class="genericon-standard"></div>
<div class="genericon-aside"></div>
<div class="genericon-image"></div>
<div class="genericon-gallery"></div>
<div class="genericon-video"></div>
<div class="genericon-status"></div>
<div class="genericon-quote"></div>
<div class="genericon-link"></div>
<div class="genericon-chat"></div>
<div class="genericon-audio"></div>
/* Social icons */
<div class="genericon-github"></div>
<div class="genericon-dribbble"></div>
<div class="genericon-twitter"></div>
<div class="genericon-facebook"></div>
<div class="genericon-facebook-alt"></div>
<div class="genericon-wordpress"></div>
<div class="genericon-googleplus"></div>
<div class="genericon-linkedin"></div>
<div class="genericon-linkedin-alt"></div>
<div class="genericon-pinterest"></div>
<div class="genericon-pinterest-alt"></div>
<div class="genericon-flickr"></div>
<div class="genericon-vimeo"></div>
<div class="genericon-youtube"></div>
<div class="genericon-tumblr"></div>
<div class="genericon-instagram"></div>
/* Meta icons */
<div class="genericon-comment"></div>
<div class="genericon-category"></div>
<div class="genericon-tag"></div>
<div class="genericon-time"></div>
<div class="genericon-user"></div>
<div class="genericon-day"></div>
<div class="genericon-week"></div>
<div class="genericon-month"></div>
<div class="genericon-pinned"></div>
/* Other icons */
<div class="genericon-search"></div>
<div class="genericon-unzoom"></div>
<div class="genericon-zoom"></div>
<div class="genericon-show"></div>
<div class="genericon-hide"></div>
<div class="genericon-close"></div>
<div class="genericon-close-alt"></div>
<div class="genericon-trash"></div>
<div class="genericon-star"></div>
<div class="genericon-home"></div>
<div class="genericon-mail"></div>
<div class="genericon-edit"></div>
<div class="genericon-reply"></div>
<div class="genericon-feed"></div>
<div class="genericon-warning"></div>
<div class="genericon-share"></div>
<div class="genericon-attachment"></div>
<div class="genericon-location"></div>
<div class="genericon-checkmark"></div>
<div class="genericon-menu"></div>
<div class="genericon-top"></div>
<div class="genericon-minimize"></div>
<div class="genericon-maximize"></div>
<div class="genericon-404"></div>
<div class="genericon-spam"></div>
<div class="genericon-summary"></div>
<div class="genericon-cloud"></div>
<div class="genericon-key"></div>
<div class="genericon-dot"></div>
<div class="genericon-next"></div>
<div class="genericon-previous"></div>
<div class="genericon-expand"></div>
<div class="genericon-collapse"></div>
<div class="genericon-dropdown"></div>
<div class="genericon-dropdown-left"></div>
<div class="genericon-top"></div>
<div class="genericon-draggable"></div>
<div class="genericon-phone"></div>
<div class="genericon-send-to-phone"></div>
<div class="genericon-plugin"></div>
<div class="genericon-cloud-download"></div>
<div class="genericon-cloud-upload"></div>
<div class="genericon-external"></div>
<div class="genericon-document"></div>
<div class="genericon-book"></div>
/* Generic shapes */
<div class="genericon-uparrow"></div>
<div class="genericon-rightarrow"></div>
<div class="genericon-downarrow"></div>
<div class="genericon-leftarrow"></div>
</div>CSS スタイルシートエディタ－の方には、こういう CSS を追加したら、上記のようなアイコンが表示されるようになりました。
/* genericon css 2013年6月9日 */
.entry-content div[class^="genericon"] {
display: inline-block;
width: 16px;
height: 16px;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1;
font-family: 'Genericons';
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
}
/**
* Individual icons
*/
/* Post formats */
.entry-content .genericon-standard:before {
content: '\f100';
}
.entry-content .genericon-aside:before {
content: '\f101';
}
.entry-content .genericon-image:before {
content: '\f102';
}
.entry-content .genericon-gallery:before {
content: '\f103';
}
.entry-content .genericon-video:before {
content: '\f104';
}
.entry-content .genericon-status:before {
content: '\f105';
}
.entry-content .genericon-quote:before {
content: '\f106';
}
.entry-content .genericon-link:before {
content: '\f107';
}
.entry-content .genericon-chat:before {
content: '\f108';
}
.entry-content .genericon-audio:before {
content: '\f109';
}
/* Social icons */
.entry-content .genericon-github:before {
content: '\f200';
}
.entry-content .genericon-dribbble:before {
content: '\f201';
}
.entry-content .genericon-twitter:before {
content: '\f202';
}
.entry-content .genericon-facebook:before {
content: '\f203';
}
.entry-content .genericon-facebook-alt:before {
content: '\f204';
}
.entry-content .genericon-wordpress:before {
content: '\f205';
}
.entry-content .genericon-googleplus:before {
content: '\f206';
}
.entry-content .genericon-linkedin:before {
content: '\f207';
}
.entry-content .genericon-linkedin-alt:before {
content: '\f208';
}
.entry-content .genericon-pinterest:before {
content: '\f209';
}
.entry-content .genericon-pinterest-alt:before {
content: '\f210';
}
.entry-content .genericon-flickr:before {
content: '\f211';
}
.entry-content .genericon-vimeo:before {
content: '\f212';
}
.entry-content .genericon-youtube:before {
content: '\f213';
}
.entry-content .genericon-tumblr:before {
content: '\f214';
}
.entry-content .genericon-instagram:before {
content: '\f215';
}
/* Meta icons */
.entry-content .genericon-comment:before {
content: '\f300';
}
.entry-content .genericon-category:before {
content: '\f301';
}
.entry-content .genericon-tag:before {
content: '\f302';
}
.entry-content .genericon-time:before {
content: '\f303';
}
.entry-content .genericon-user:before {
content: '\f304';
}
.entry-content .genericon-day:before {
content: '\f305';
}
.entry-content .genericon-week:before {
content: '\f306';
}
.entry-content .genericon-month:before {
content: '\f307';
}
.entry-content .genericon-pinned:before {
content: '\f308';
}
/* Other icons */
.entry-content .genericon-search:before {
content: '\f400';
}
.entry-content .genericon-unzoom:before {
content: '\f401';
}
.entry-content .genericon-zoom:before {
content: '\f402';
}
.entry-content .genericon-show:before {
content: '\f403';
}
.entry-content .genericon-hide:before {
content: '\f404';
}
.entry-content .genericon-close:before {
content: '\f405';
}
.entry-content .genericon-close-alt:before {
content: '\f406';
}
.entry-content .genericon-trash:before {
content: '\f407';
}
.entry-content .genericon-star:before {
content: '\f408';
}
.entry-content .genericon-home:before {
content: '\f409';
}
.entry-content .genericon-mail:before {
content: '\f410';
}
.entry-content .genericon-edit:before {
content: '\f411';
}
.entry-content .genericon-reply:before {
content: '\f412';
}
.entry-content .genericon-feed:before {
content: '\f413';
}
.entry-content .genericon-warning:before {
content: '\f414';
}
.entry-content .genericon-share:before {
content: '\f415';
}
.entry-content .genericon-attachment:before {
content: '\f416';
}
.entry-content .genericon-location:before {
content: '\f417';
}
.entry-content .genericon-checkmark:before {
content: '\f418';
}
.entry-content .genericon-menu:before {
content: '\f419';
}
.entry-content .genericon-top:before {
content: '\f420';
}
.entry-content .genericon-minimize:before {
content: '\f421';
}
.entry-content .genericon-maximize:before {
content: '\f422';
}
.entry-content .genericon-404:before {
content: '\f423';
}
.entry-content .genericon-spam:before {
content: '\f424';
}
.entry-content .genericon-summary:before {
content: '\f425';
}
.entry-content .genericon-cloud:before {
content: '\f426';
}
.entry-content .genericon-key:before {
content: '\f427';
}
.entry-content .genericon-dot:before {
content: '\f428';
}
.entry-content .genericon-next:before {
content: '\f429';
}
.entry-content .genericon-previous:before {
content: '\f430';
}
.entry-content .genericon-expand:before {
content: '\f431';
}
.entry-content .genericon-collapse:before {
content: '\f432';
}
.entry-content .genericon-dropdown:before {
content: '\f433';
}
.entry-content .genericon-dropdown-left:before {
content: '\f434';
}
.entry-content .genericon-top:before {
content: '\f435';
}
.entry-content .genericon-draggable:before {
content: '\f436';
}
.entry-content .genericon-phone:before {
content: '\f437';
}
.entry-content .genericon-send-to-phone:before {
content: '\f438';
}
.entry-content .genericon-plugin:before {
content: '\f439';
}
.entry-content .genericon-cloud-download:before {
content: '\f440';
}
.entry-content .genericon-cloud-upload:before {
content: '\f441';
}
.entry-content .genericon-external:before {
content: '\f442';
}
.entry-content .genericon-document:before {
content: '\f443';
}
.entry-content .genericon-book:before {
content: '\f444';
}
/* Generic shapes */
.entry-content .genericon-uparrow:before {
content: '\f500';
}
.entry-content .genericon-rightarrow:before {
content: '\f501';
}
.entry-content .genericon-downarrow:before {
content: '\f502';
}
.entry-content .genericon-leftarrow:before {
content: '\f503';
}
テーマ「Twenty Twelve」にすると Genericons の方は表示されなくなることから、Genericons の方はすべてのテーマで使えるものではないことが推察されます。
一方、Noticons の方はどのテーマでも表示されますが、ログアウトすると表示されなくなります。
以上、WordPress.com でのアイコン表示についての考察でした。
