- ブートストラップの導入: まず最初に、HTMLファイルのセクション内にブートストラップのCDNリンクを追加します。
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>- 引用アイコンの追加: 引用アイコンを表示する場所に、以下のようなHTMLコードを追加します。
<span class="blockquote">
<i class="fas fa-quote-left"></i>
</span>このコードでは、要素を使用して引用アイコンのコンテナを作成し、要素にはアイコンのクラス名を指定します。ここでは、Font Awesomeのアイコンを使用しています。
- スタイリングのカスタマイズ: ブートストラップのクラスを使用して、引用アイコンのスタイルをカスタマイズすることもできます。たとえば、アイコンのサイズや色を変更するには、適切なクラスを追加します。
<span class="blockquote">
<i class="fas fa-quote-left fa-lg text-primary"></i>
</span>この例では、fa-lgクラスを使用してアイコンのサイズを大きくし、text-primaryクラスを使用してアイコンの色を変更しています。