Welcome Link Bannerのアイコンの代わりに絵文字を使用する

開発
1

質問: バナーの色はデフォルトでテーマの色（たとえば、フォーラムがダークモードの場合）を尊重しますか？

また、2つの機能リクエストがあります。

  • アライメントを中央揃えではなく左揃えに変更できると素晴らしいです（CSSで簡単にできると思いますが）。
  • Font Awesomeアイコンの代わりに絵文字を使用できるようになると嬉しいです。
「いいね！」 2
2

私の経験では、はい。こちらに私のスクリーンショットをご覧ください：Third migration, once again for a niche forum (Volkswagen Campers vans)

少しハッキーですが、CSSだけで実現できます：

.featured-todo div {
    h3 {
        background: no-repeat top center;
        background-size: 30px 30px; // 絵文字の幅と高さ
        padding-top: 45px; // 絵文字の高さ + 15px の下マージン
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1088×300 21.5 KB

どの部分についてお話しされていますか？

「いいね！」 4
3

ご協力ありがとうございます @Canapin

3つのリンクとそのアイコンについて、デスクトップとモバイルの両方で、テキストとアイコンを中央揃えではなく左揃えにしたいです。CSS/HTMLの基本的な知識があり、開発者ツールを使っても変更方法がわかりませんでした。

「いいね！」 1
4

アイコン付き：

.featured-todo div h3 {
    display: flex;
    align-items: center;
    svg {
        margin: 0 10px 0 0 !important;
    }
}

image
image1304×356 21.1 KB

絵文字付き：

.featured-todo div {
    h3 {
        display: flex;
        align-items: center;
        background: no-repeat left center;
        background-size: 30px 30px; // 絵文字の幅と高さ
        padding-left: 45px; // 絵文字の幅 + 左マージン15px
        svg {
            display: none !important;
        }
    }
    &:first-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/rocket.png");
    }
    &:nth-child(2) h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/grin.png");
    }
    &:last-child h3 {
        background-image: url("https://emoji.discourse-cdn.com/twitter/+1.png");
    }
}

image
image1293×368 24.6 KB

注：これらのカスタマイズはモバイルではテストしていません。

「いいね！」 4
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.