読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

Font AwesomeでPocketアイコンが追加されたのでシェアボタンのアイコン変更の仕方

Web制作
スポンサーリンク

「Font Awesome」で使えるアイコンないかなあと思ってみたら、Pocketのアイコンが追加されているではないですか!

ということで、今まで配布していたシェアボタンでPocketボタンをキチンとしたPocketのアイコンに変更してみました。お知らせです。

 

実装図

元記事

www.yukihy.com

こちらの記事でシェアボタンをつくっていたのですが、Pocketに関してはアイコンがなかったので、下矢印でごまかしてました。笑

こちらが元のボタン。

f:id:ftmaccho:20150809183721j:plain

でしたが、「font awesome」のキチンとしたアイコンを使うとこうなります。

f:id:ftmaccho:20150809183817j:plain

ちゃんとしたのになりました。

変更の仕方

ちなみに元記事の方は全てのボタンでちゃんとしたPocketのボタンが反映されるようにしてありますので、これからの方は元記事の方のやり方で素直にやっていただくとできます。

 

ただ、今まで使っていただいていた方で変更したい方もいると思うので、やり方を書きます。2箇所変えるだけなのでそこまで大変ではないです。

変更点1

Font Awesome Icons」で新しいバージョンのものを読み込み直します。

具体的にはコピペコード1で「headに要素を追加」する部分の、一行目を

に変えてください。

変更点2

Pocketのボタンを読み込むことができたので、あとはhtmlである、コピペコード4とコピペコード6の中から

<i class="blogicon-chevron-down"></i>

と書かれている部分を探してください。(下の方にあります)

この部分を

に変えていただければ、変わると思います。

 以上です

以上が変更点です。今までのボタンでも十分Pocketっぽかったのでどうでも良いっちゃ良いことかもしれませんが、一応書いてみました。

ただやはりラインなどのボタンはないので、そのあたりは「IcoMoon」で作ってGoogleドライブなどから取るか、画像にするしかないかもしれません。このあたりもモゾモゾとやっていきたいです。

www.yukihy.com