お世話になっております。
四角いアイコンボタンの追加ですが、仰る通り、リンク先のコメントの回答と同じ方法で可能です。
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でアイコンが□(四角)になって表示されない場合の対策まとめ
よろしくお願いします。
お忙しい中お早い回答ありがとうございます
すみません当方の説明不足でした
追加したいボタンはサイドバーのプロフィール下にある丸っこいボタンです
こちらにsoundcloudとpixivを追加したいのですが可能でしょうか?
回答よろしくお願いします
それであればやり方はもっとシンプルで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です。
よろしくお願いします。
お世話になっております
教えてくださった方法で設定できました
ありがとうございました!
WordPressテーマSANGOの質問
サイドバーのプロフィールのリンクアイコンにsoundcloudとpixivを追加したい
お世話になります
サイドバーのプロフィール欄の下にsoundcloudとpixivを追加したいのですが、当方初心者なものでどうにも追加できず困っています
https://saruwakakun.com/sango/comments?id=1426
の記事を参考にして、プロフィール下のボタンは作れたのですがアイコンを設定できません
おそらくFontAwesome5にはsoundcloudとpixivのアイコンはないと思うので、それっぽい雲のアイコンとかペンのアイコンとかが設定できればと思うのですが、どういう風にすれば実装できますでしょうか。
お忙しいところ恐縮ですがよろしくお願いします