2025年1月18日土曜日

Tricktreeで各種SNSアイコン等を表示する

まぁ文字だけでなく、アイコンも表示させた方がいいかなとは前から思っていて、
今回のDonation版(Tricktree Plofile)ではデフォルトで入れています

基本は Bootstrap Icons
Bootstrap Icons · Official open source SVG icon library for Bootstrap

<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css' rel='stylesheet'/>

<head> 内または </head>上とかに上記のコードをコピーします(現在の最新版)

選択の理由はTwitterのXアイコンがあるからです
Twitter X · Bootstrap Icons

まぁコードを拾ってきてコピーするだけです


<i class="bi bi-twitter-x"></i>

Bloggerアイコンの入れ方

関連:
Blogger標準のSVGアイコンを呼び出す
数値を調整する必要があるのと、CSSを追加する必要があります(こちらも調整が必要)

CSS

.icon {
  position: relative;
  /* 値は調整してください */
  top: 4px;
  left: 1px;
}

iconのクラスを追加しています

関連情報:
[CSS]アイコンとテキストを横並びに揃えるスタイルシートのテクニック | コリス
https://coliss.com/articles/build-websites/operation/css/aligning-icons-to-text.html

F(uriouz)

欲しいものリスト
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

コメントを投稿

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."