phoenix-power今まで公式なアイコンじゃなかったので。

正しい表示

間違った表示

面倒だったので、似たアイコンでいいやと思っていたのだけど、以下の記事が出てました。

【保存版!?】はてブAPIでwebサービスを作りたい全ての人に向けて書きました - Syncer

ということで、まるで自分のこと言われているみたいだったので、修正。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
span.icon-hatena {
  font-size:26px;
  font-weight: bold;
  font-family:'Verdana';
  color: #fff;
}

span.icon-hatena:hover {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  color: #3366CC;
}
HTML
1
2
3
4
5
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={{ site.url }}{{ page.url }}&title={{ page.title }}" target="_blank"><span class="hatena-name">{% if site.share_button_hatena %}<span class="icon-hatena"
style="float: left;
font-size: 20px;
padding-left: 5px;"
>B!</span>{% endif %} Bookmark</span></a>