引用文を CSS でそれっぽく表示する

※ これは 2020/04/10 時点の font awasome v5.13.0 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

ちまたでは12連休だそうですが、こちらはリモートワークなので通常営業です！

今回は Font Awesome を利用して下記のような引用文を CSS で記述してみます

世界を敵に回してもねこを愛してる

部屋はねこのおもちゃまみれ、ねこ吸いは呼吸の一種、ねことの毎日が幸せすぎて…。

記述したコードはこんな感じ

<blockquote>
  <p>世界を敵に回してもねこを愛してる</p>
  <p>部屋はねこのおもちゃまみれ、ねこ吸いは呼吸の一種、ねことの毎日が幸せすぎて…。 </p>
</blockquote>

CSS はこう

blockquote {
  position: relative;
  padding: 10px 15px 10px 60px;
  box-sizing: border-box;
  background: #dfdfef;
  color: #226;
}

blockquote:before {
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.7;
}

Font Awesome は class 使わない場合、font-family を FontAwesome にして content 属性を指定すれば表示できるっぽい