「Font Awesome」で使えるアイコンないかなあと思ってみたら、Pocketのアイコンが追加されているではないですか！
ということで、今まで配布していたシェアボタンでPocketボタンをキチンとしたPocketのアイコンに変更してみました。お知らせです。
実装図
元記事
こちらの記事でシェアボタンをつくっていたのですが、Pocketに関してはアイコンがなかったので、下矢印でごまかしてました。笑
こちらが元のボタン。
でしたが、「font awesome」のキチンとしたアイコンを使うとこうなります。
ちゃんとしたのになりました。
変更の仕方
ちなみに元記事の方は全てのボタンでちゃんとしたPocketのボタンが反映されるようにしてありますので、これからの方は元記事の方のやり方で素直にやっていただくとできます。
ただ、今まで使っていただいていた方で変更したい方もいると思うので、やり方を書きます。２箇所変えるだけなのでそこまで大変ではないです。
変更点１
「Font Awesome Icons」で新しいバージョンのものを読み込み直します。
具体的にはコピペコード１で「headに要素を追加」する部分の、一行目を
に変えてください。
変更点２
Pocketのボタンを読み込むことができたので、あとはhtmlである、コピペコード４とコピペコード６の中から
<i class="blogicon-chevron-down"></i>
と書かれている部分を探してください。（下の方にあります）
この部分を
に変えていただければ、変わると思います。
以上です
以上が変更点です。今までのボタンでも十分Pocketっぽかったのでどうでも良いっちゃ良いことかもしれませんが、一応書いてみました。
ただやはりラインなどのボタンはないので、そのあたりは「IcoMoon」で作ってGoogleドライブなどから取るか、画像にするしかないかもしれません。このあたりもモゾモゾとやっていきたいです。
