現実世界のタグのようなタグの見た目を

このソリューションはもはや機能しないようです。更新されたバージョンがあります:

(これはタグタイプ「bullet」用です。元のスタイルが異なる場合、CSS セレクターも異なります。)

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.discourse-tag.bullet::before {
    top: 0em;
    margin-right: 5px;
    content: "\f02b";
    color: #bbbdbb;
    background: none;
    height: 16px; /* モバイルビューでは少し調整が必要な場合があります */
  
    font-weight: 900;
    font-size: 0.9em;
    font-family: "Font Awesome 5 Free"; /* これが正しい font-family です */
}

または、https://use.fontawesome.com/releases/v5.13.0/css/all.css の全体を読み込む不要な負荷を減らすために、@import 行を削除し、SVG をコンテンツとして使用することもできます:

   content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="10" width="10" ><path fill="grey" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>');

すべての SVG はこちらで確認できます:

「いいね!」 3