WordPressテーマSANGOの質問

サイドバーのプロフィールのリンクアイコンにsoundcloudとpixivを追加したい

アバター
堂島

お世話になります
サイドバーのプロフィール欄の下にsoundcloudとpixivを追加したいのですが、当方初心者なものでどうにも追加できず困っています
https://saruwakakun.com/sango/comments?id=1426
の記事を参考にして、プロフィール下のボタンは作れたのですがアイコンを設定できません
おそらくFontAwesome5にはsoundcloudとpixivのアイコンはないと思うので、それっぽい雲のアイコンとかペンのアイコンとかが設定できればと思うのですが、どういう風にすれば実装できますでしょうか。
お忙しいところ恐縮ですがよろしくお願いします

プロフィールを表示する
記事下にプロフィール(この記事を書いた人)を設置する
コメントへの回答
サルワカくん
サルワカくん
2020/04/22

お世話になっております。
四角いアイコンボタンの追加ですが、仰る通り、リンク先のコメントの回答と同じ方法で可能です。
Soundcloudはアイコンがあるようなので、そちらを使えば良いと思います。

以下のようなHTMLを追加して…

<a class="soundcloud" href="★SoundcloudのURL★" target="_blank" rel="nofollow">Soundcloud</a>

CSSは以下を追加します。

.follow_btn .soundcloud:before {
    background: #色コード;
    content: "\f1be";
}

\f1beというコードはFontAwesomeのアイコン詳細ページ(SoundCloudの場合はこちら)で確認できます(CSSでアイコンを指定する場合は、iタグを使うのではなく、このような形にします)。

Pixivについてはアイコンがないので、使いたいアイコン(ProではなくFreeのものを選ぶようにしましょう)を選びます。
このとき、アイコンの種類によっては、font-weightを合わせて指定する必要があります。具体的にはsolidのアイコン(iタグのclassにfasとつくもの)の場合はfont-weight: 900と指定します。
参考:FontAwesomeでアイコンが□(四角)になって表示されない場合の対策まとめ

よろしくお願いします。

アバター
堂島
2020/04/22

お忙しい中お早い回答ありがとうございます
すみません当方の説明不足でした
追加したいボタンはサイドバーのプロフィール下にある丸っこいボタンです
こちらにsoundcloudとpixivを追加したいのですが可能でしょうか?
回答よろしくお願いします

サルワカくん
サルワカくん
2020/04/23

それであればやり方はもっとシンプルでHTMLに以下を追加するだけです。

<li><a href="★SoundcloudのURL★" target="_blank" rel="nofollow"><i class="fab fa-soundcloud"></i></a></li>

アイコンの色指定のCSSは次のような感じですね。

.profile-sns .fa-soundcloud {
    background: #ff8400;
}

Pixivのアイコンでも同様で、使いたいアイコンをFontAwesomeのアイコン一覧から探して、<i class="◯◯"></i>の部分を入れ替えればOKです。
よろしくお願いします。

アバター
堂島
2020/04/23

お世話になっております
教えてくださった方法で設定できました
ありがとうございました!