Font Awesome 5 の使い方 - Web絵文字フォントをttfファイルを使い、アイコンを表示する

Font Awesome 5 の使い方 - Web絵文字フォントアイコンをttfファイルを使い表示する
Awesomeのttfをインストールし、CSSの疑似要素(::before/::after)を使う

準備｜Font Awesome 5 の基本的な使用例｜Font Awesome 5 の応用例
サルワカサイトの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」カスタマイズ

Font Awesome はバージョンが５になって、つぎの２つの方法で使用できるようになっています。

今までと同じ Web フォントとして使う方法（Using Web Fonts with CSS）
SVG と JavaScript で使う方法（Using SVG with JavaScript）

２つの使用方法についてはつぎのとおり、５つのカスタマイズ方法があります。

CSSで読み込む - 今までと同じ Web フォントとして使う方法（Using Web Fonts with CSS）
1. CDNを使う（使い方１）
  1. 規定のclass名を使う（使い方１-1）
  2. ttfをインストールし、CSSの疑似要素(::before/::after)を使う（使い方１-2）
2. サーバーに Font AwesomeのCSSファイルを配置する（使い方２）
JavaScriptで読み込む - SVG と JavaScript で使う方法（Using SVG with JavaScript）
1. CDNを利用する（使い方３）
2. Font AwesomeのJSファイルをダウンロードしてサーバーに配置する（使い方４）

このページは、上の５つのカスタマイズ方法のうち、「1.1.2. ttfをインストールし、CSSの疑似要素(::before/::after)を使う（使い方１-2）」について説明しています。合せて、つぎのサイト「Web Design Leaves　Font Awesome 5 の基本的な使い方」を参照してください。
他のカスタマイズ方法につては、多くのWebサイトで紹介されています。

準備

つぎのような準備があります。

Font Awesome 5 のダウンロード ≫
Font Awesome 5 フォントttfファイルのインストール ≫
Font Awesome 5 CSSファイルファイルのインクルード(CSS) ≫
Font Awesome 5 CSSの疑似要素(::before/::after)の使い方（HTML/CSS) ≫

Font Awesome 5 のダウンロード

つぎのサイトから、Font Awesome 5 フリー版（Version 5.12.0 Download Font Awesome Free for the Web）をダウンロードします。
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

ダウンロードボタン
fontawesome-free-5.12.0-web.zip (2020年1月2日現在)

Font Awesome 5フォントttfファイルのインストール

ダウンロードしたfontawesome-free-5.12.0-web.zip(ファイル名は2020年1月2日現在)ファイルを解凍し、webfontsフォルダ内の３つのttfファイルをインストールします。

ttfインストール
【インストール方法】

(1) webfontsフォルダ内のttfファイル名を右クリック
(2) ポップアップメニューの「インストール(i)」を左クリック

つぎに、インストール結果をまとめました。

No.	ダウンロードttfファイル名	インストール先フォルダ C:/Windows/Fonts/内のファイル名	CSSのfont-familyの値（フォント名）（注）Brandsには、Free を付けない	備考
1	fa-brands-400.ttf	Font Awesome 5 Brands 標準	Font Awesome 5 Brands
2	fa-regular-400.ttf	Font Awesome 5 Free	Font Awesome 5 Free
3	fa-solid-900.ttf	非表示	Font Awesome 5 Free Solid

Font Awesome 5 CSSファイルファイルのインクルード（CSS) - Font Awesome 5 Freeフォント使用時

Font Awesome 5 Freeフォントを使用する場合は、Font Awesome 5 CSSファイルを、<head>タグ内に、つぎのサイトを参照しCDNのall.cssまたはall.min.cssのURLをコピーしインクルードします。 https://cdnjs.com/libraries/font-awesome
Font Awesome 5 BrandsまたはFont Awesome 5 Solidを使用する場合は、CSSファイルは不要です。

Font Awesome 5 CSSファイル

<!-- Font Awesome 5 CSSファイル CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

Font Awesome 5 CSSの疑似要素(::before/::after)の使い方（HTML/CSS)

ttfファイルを使う場合、CSSの::before(::after)擬似要素で、HTMLタグ要素の直前（直後）にWebフォントアイコンを挿入します。
挿入内容Webフォントアイコンはcontentプロパティで指定します。
ここの例は、blockquoteタグ領域の直前・直後に、Font Awesome 5 Free Regularフォントアイコンを表示します。

CSS
HTML
HTML全体まとめ

blockquote::before{
    content: "\f10d";   /* quote-leftアイコン */
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Regularフォント */ 
    font-weight: 900;   /* Font Awesome 5 Freeのとき、Fontウェイトは900 */
}
blockquote::after{
    content: "\f10e";  /* quote-rightアイコン */
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Regularフォント */ 
    font-weight: 900;
}

<blockquote style="background:beige;padding:10px">
        この文の直前、直後にWebフォント絵文字アイコンを表示します。
</blockquote>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- Font Awesome 5 CDN CSSファイル  --> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

<!-- Font Awesome 5 CSS Brands --> 
<style>
blockquote::before{
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
blockquote::after{
    content: "\f10e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
</style>

<style>
body{
 width:900px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
 }
</style>
</head>
<body>
<h3 align=center>Font Awesome 5 Free サンプル 1</h3>
<blockquote style="background:beige;padding:10px">
        この文の直前、直後にWebフォント絵文字アイコンを表示します。
</blockquote>

</body>
</html>

CSS

contentプロパティ
1. 下表の表示したいWebフォントアイコンのスタイルの値をクリックし、Font Awesome 5アイコン一覧を表示します
2. 表示したいWebフォントアイコンをFont Awesome 5アイコン一覧から探し出します
3. そのアイコンをダブルクックして、そのアイコンのデータを表示します
4. Unicodeコードをコピーして設定します。
  例えば、Unicodeコードが f10d のとき、先頭に"\"を付けCSSに"\f10d"を設定します。
font-familyプロパティ、font-weightプロパティ
1. 下表により、表示したいWebフォントアイコンのfont-family、font-weightを設定します
2. Regularのfont-weightは、Freeで使用するとき、900 を設定します。
  　SolidおよびBrandsは、font-weightを省略できます。

項番	スタイル（注）	CSS font-family	利用方法	CSS font-weight	Style Prefix - 表示例
1	Solid	Font Awesome 5 Free Solid	Free	900	fas <i class="fas fa-camera"></i>
2	Brands	Font Awesome 5 Brands	Free	400	fab <i class="fab fa-font-awesome"></i>
3	Regular	Font Awesome 5 Free	Free/Pro Required	900(Free)/400	far <i class="far fa-camera"></i>
4	Light	-	Pro Required	300	fal <i class="fal fa-camera"></i>
5	Duotone	-	Pro Required	900	fad <i class="fad fa-camera"></i>
（注）スタイルの項目は、Font Awesome 5の「アイコン一覧」ページへリンクしています。・Regularの場合、「アイコン一覧」で、Proアイコンはグレイ表示になっていますがFreeで使用できます。・Solidの場合、「アイコン一覧」で、グレイ表示のProアイコンは使用できません。・Brandsの場合、Pro,Freeの区別がなく、すべて使用できます。

HTML全体まとめデモ

Font Awesome 5の基本的な使い方

Font Awesome 5 Free Solidの使い方

３つのSolidアイコンを、順にliタグ要素の先頭、直後、先頭に、横並びに表示する例です。

CSS
HTML
HTML全体まとめ

/* Font Awesome 5 Free Solidアイコン */

#ul_solid {
  font-family: "Font Awesome 5 Free Solid"; /* Font Awesome 5 Free Solid フォント */
  margin-right: 5px;
  list-style: none;   /* liタグのリスト先頭にマーカーを表示しない */
  /* li（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* li（子要素）の横並び */
}
.baby::before {
  content: "\f77c";  /* babyアイコン */
  color: red;        /* アイコンの色 */
  font-size: 30px;   /* アイコンの大きさ */
}
.baby-carriage::after {
  content: "\f77d";  /* baby-carriageアイコン */
  color: #3b5998;
  font-size: 30px;
}
.bicycle::before {
  content: "\f206";  /* baby-carriageアイコン */
  color: green;
  font-size: 30px;
}

#ul_solid li {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: .5rem
}

<ul id="ul_solid">
  <li class="baby"> baby</li>
  <li class="baby-carriage">baby-carriage </li>
  <li class="bicycle"> bicycle</li>
</ul>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
/* Font Awesome 5 Free Solidアイコン */

#ul_solid {
  font-family: "Font Awesome 5 Free Solid";  /* Font Awesome 5 Free Solid フォント */
  margin-right: 5px;
  list-style: none;
  /*
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;
}

.baby::before {
  content: "\f77c";  /* babyアイコン */
  color: red;
  font-size: 30px;
}
.baby-carriage::before {
  content: "\f77d";  /* baby-carriageアイコン */
  color: #3b5998;
  font-size: 30px;
}
.bicycle::before {
  content: "\f206";  /* baby-carriageアイコン */
  color: green;
  font-size: 30px;
}

#ul_solid li {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: .5rem
}
 </style>

<style>
body{
 width:600px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
 }
</style>
</head>
<body>
<h3>ULタグで、Solidアイコンを使用した例 ttf=Font Awesome 5 Solid </h3>
<ul id="ul_solid">
  <li class="baby"> baby</li>
  <li class="baby-carriage"> baby-carriage</li>
  <li class="bicycle"> bicycle</li>
</ul>
<br>

</body>
</html>

Font Awesome 5 Free Solid デモ

Font Awesome 5 Brandsの使い方

３つのBrandsアイコン（twitter,facebook,instagram）を、順にliタグ要素の先頭、先頭、先頭に、横並びにSNSアイコンを表示する例です。

CSS
HTML
HTML全体まとめ

/* Font Awesome 5 Brands アイコン */
#ul_brands {
  font-family: "Font Awesome 5 Brands";  /* Brandsアイコン ttfは、Free を付けない */
  margin-right: 5px;
  list-style: none;
  /* li（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* li（子要素）の横並び */ 
}

.twitter{
   background: #00aced;  /* li領域の背景色 */
   color: #ffffff;       /* li領域の文字の色 */
}
.twitter::before {
  content: "\f099";  /* twitter アイコン */
  color: #ffffff;    /* twitter アイコンの色 */
}

.facebook {
  background: #3b5998;  /* li領域の背景色 */
  color: #ffffff;       /* li領域の文字の色 */
}
.facebook::before {
  content: "\f39e";     /* facebook-f アイコン */
  color: #3b5998;       /* facebook-f アイコンの色 */
  background: #ffffff;  /* facebook-f アイコンの背景色 */

}

.instagram::before {
  content: "\f16d";    /* instagram アイコン */
  color: #e1306c;      /* instagram アイコンの色 */
}

#ul_brands li {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 3px;
}

<ul id="ul_brands">
  <li class="twitter"> tweet</li>
  <li class="facebook"> Share</li>
  <li class="instagram"> Instagram</li>
</ul>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<!-- FontAwesome Brands  -->
<style>

/* Font Awesome 5 Brands アイコン */
#ul_brands {
  font-family: "Font Awesome 5 Brands";
  margin-right: 5px;
  list-style: none;
  /*
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;
}

.twitter{
   background: #00aced;  /* li領域の背景色 */
   color: #ffffff;       /* li領域の文字の色 */
}
.twitter::before {
  content: "\f099";  /* twitter アイコン */
  color: #ffffff;    /* twitter アイコンの色 */
}

.facebook {
  background: #3b5998;  /* li領域の背景色 */
  color: #ffffff;       /* li領域の文字の色 */
}
.facebook::before {
  content: "\f39e";     /* facebook-f アイコン */
  color: #3b5998;       /* facebook-f アイコンの色 */
  background: #ffffff;  /* facebook-f アイコンの背景色 */

}

.instagram::before {
  content: "\f16d";    /* instagram アイコン */
  color: #e1306c;      /* instagram アイコンの色 */
}

#ul_brands li {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 3px;
}
</style>

<style>
body{
 width:700px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
 }
</style>

</head>
<body>
<h2>ULタグで、SNSアイコンを使用した例 - Font Awesome 5 Brands </h2>
<ul id="ul_brands">
  <li class="twitter"> tweet</li>
  <li class="facebook"> Share</li>
  <li class="instagram"> Instagram</li>
</ul>

</body>
</html>

Font Awesome 5 Brands デモ

Font Awesome 5 Free(Regular)の使い方

３つのRegularアイコン（twitter,facebook,instagram）を、順にdivタグ要素の先頭、直後、先頭に、横並びに表示する例です。
Regularアイコンの場合、Font Awesome 5のCSSファイルを使用します（「HTML全体まとめ」タブ内参照）。

CSS
HTML
HTML全体まとめ

/* Font Awesome 5 Free Regularフォント */

#div_regular {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
  padding: 5px;
  /* div（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* div（子要素）の横並び */
}

.quote-left::before {
  content: "\f10d";  /* quote-left アイコン */
  color: green;      /* アイコンの色 */   
  font-size: 30px;   /* アイコンの大きさ */    
}

.quote-right::after {
  content: "\f10e";  /* quote-right アイコン */
  color: #3b5998;   
  font-size: 30px; 
}

.smile-wink::before {  
  content: "\f4da";  /* smile-wink アイコン */
  color: brown;   
  font-size: 30px; 
}

#div_regular div {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 6px; 
}

<DIV id="div_regular">
  <div class="quote-left"> quote-left</div>
  <div class="quote-right">quote-right </div>
  <div class="smile-wink"> smile-wink</div>
</DIV>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 

<!-- Font Awesome 5 CSSファイル -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.css" rel="stylesheet">

<style>
/* Font Awesome 5 Free Regularフォント */

#div_regular {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
  padding: 5px;
  /* div（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* div（子要素）の横並び */
}

.quote-left::before {
  content: "\f10d";  /* quote-left アイコン */
  color: green;      /* アイコンの色 */   
  font-size: 30px;   /* アイコンの大きさ */    
}

.quote-right::after {
  content: "\f10e";  /* quote-right アイコン */
  color: #3b5998;   
  font-size: 30px; 
}

.smile-wink::before {  
  content: "\f4da";  /* smile-wink アイコン */
  color: brown;   
  font-size: 30px; 
}

#div_regular div {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 6px; 
} 
</style>

<style>
body{
 width:800px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
 }
</style>

</head>
<body>
<h2>divタグで、Regular絵文字アイコンを使用した例 - Font Awesome 5 Free </h2>

<DIV id="div_regular">
  <div class="quote-left"> quote-left</div>
  <div class="quote-right">quote-right </div>
  <div class="smile-wink"> smile-wink</div>
</DIV>

</body>
</html>

Font Awesome 5 Regular デモ

Font Awesome 5の応用例

ブログなどで引用文を書くときは、Bkockquoteなどの引用タグを使用しますが、Font Awesome 5の応用例として引用タグ（blockquote・p・citeタグ）の使い方を取り上げます。
通例、引用文はBlockquote要素内に、pタグで引用文、citeタグで引用元情報を記述し、引用記号（”）を直前または直後表示します。

・引用文記述例（引用記号（”）略）

<blockquote>
 <p>ここの引用文・・・・</p>
 <cite>ここに引用元情報</cite>
</blockquoute>

CSS
HTML
HTML全体まとめ

/* 引用文 Blockquote, p, cite - Font Awesome 5 Free */

blockquote {
    position: relative;
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Free Regularフォント */
    font-weight: 900;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #4e4e4e;
    background: beige;
    width: 600px;
}

blockquote::before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f10d";   /* quote-leftアイコン */
    font-style: italic; /* 斜体 */
    color: #dcdcdc;     /* quote-leftアイコンの色 */ 
    font-size: 45px;
    line-height: 1;
}

blockquote::after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    text-align: center;
    content: "\f10e";   /* quote-rightアイコン */
    font-style: italic; /* 斜体 */
    color: #dcdcdc;     /* quote-leftアイコンの色 */  
    font-size: 45px;
    line-height: 1;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 30px 10px;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: center;
    color: #888888;
    font-size: 0.9em;
    font-style: normal; /* 斜体 */
}

blockquote a {
   text-decoration: none;
}
blockquote a:hover {
   text-decoration: underline;
}

<blockquote id="block_quote">
<p> 
年末年始は冬将軍が到来。大みそかから元日は冬型の気圧配置が強まり、
北海道や東北の日本海側を中心に荒れた天気になりそうです。
</p>
    <cite>引用元 - <a href="https://weather.yahoo.co.jp/weather/" target="_blank">年末年始のお天気 - Yahoo天気</a></cite>
</blockquote>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font Awesome 5 応用例 - blockquote, p, citeタグで引用文をつくる</title>

<!-- Font Awesome 5 CSSファイル -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<style>

/* 引用文 Blockquote, p, cite - Font Awesome 5 Free */

blockquote {
    position: relative;
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Free Regularフォント */
    font-weight: 900;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #4e4e4e;
    background: beige;
    width: 600px;
}

blockquote::before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f10d";   /* quote-leftアイコン */
    font-style: italic; /* 斜体 */
    color: #dcdcdc;     /* quote-leftアイコンの色 */ 
    font-size: 45px;
    line-height: 1;
}

blockquote::after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    text-align: center;
    content: "\f10e";   /* quote-rightアイコン */
    font-style: italic; /* 斜体 */
    color: #dcdcdc;     /* quote-leftアイコンの色 */  
    font-size: 45px;
    line-height: 1;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 30px 10px;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: center;
    color: #888888;
    font-size: 0.9em;
    font-style: normal; /* 斜体 */
}

blockquote a {
   text-decoration: none;
}
blockquote a:hover {
   text-decoration: underline;
}

</style>

<style>
body{
 width:900px; margin: 0 auto;
 font: 14px 'Lucida Grande', Verdana, sans-serif;
 }
</style>
</head>
<body>
<h2>Font Awesome 5 応用例 - blockquote, p, citeタグで引用文をつくる</h2>
<br>
<!-- 引用blockquote -->
<blockquote id="block_quote">
<p> 
年末年始は冬将軍が到来。大みそかから元日は冬型の気圧配置が強まり、
北海道や東北の日本海側を中心に荒れた天気になりそうです。
</p>
    <cite>引用元 - <a href="https://weather.yahoo.co.jp/weather/" target="_blank">年末年始のお天気 - Yahoo天気</a></cite>
</blockquote>

</body>
</html>

Font Awesome 5 応用例引用文デモ

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）の v5バージョンアップ

あの有名なサルワカサイトの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」の引用ボックスのCSSサンプル３０本ををFont Awesome 5にバージョンアップしてみました。
旧バージョンからFont Awesome 5へのバージョンアップは、つぎの２つの項目を変更します。

(1) Font Awesome 5のCSSファイルのインクルード(CDN使用の場合）：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
から

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.css" rel="stylesheet">
に変更

(CDNサイト）
旧バージョン4 CDNページ ≫ https://cdnjs.com/libraries/font-awesome/4.7.0
新バージョン5 CDNページ ≫ https://cdnjs.com/libraries/font-awesome/5.12.0-1
(2) CSSのfont-familyプロパティー：
フォント名を "FontAwesome" から "Font Awesome 5 Free"に変更

Font Awesome 5にカスタマイズした「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」のデモ３０例

1. シンプルまずはオーソドックスなデザインから。どんなサイトにも馴染みやすいはずです。
2. 引用符を横につけた場合違いが分かりづらいかもしれませんが、引用符が文の左側に配置されるようになっています。
3. 少しカラフルなカード風に影をつけて、少し浮き上がったように見せています。色は好みで変えてくださいませ（CSSの#9dd4ffで水色を指定しているので、これを好きな色コードに変えればOKです）。
4. 引用符を横に同じく引用マークを左に配置したバージョンです。
5. スマート締まった雰囲気を出したいときに使うのがおすすめです。引用符の色（blockquote:before {color:~}の部分）は、サイトに雰囲気に合わせて変えると良いでしょう。
6. 少しカラフルに背景を少し濃い目の色で塗っています。文字は見えづらくならないように太字にしています。
7. 力強いデザインに太めの枠で囲むとさらに力強いデザインになります。やや派手なので、使いどころは選ぶかもしれませんね。
8. 引用符をボックス上に左上からピョコンと引用符がはみ出るようなデザインです。少し分かりづらいですかね。
9. 引用符を白抜き比較的使いやすいデザインかと思います。背景色（blockquote {background: #ddeaff;}）は必要に応じて変えてくださいませ。
10. 角の削れたデザイン少しユニークな見た目にしてみました。目を引きたい場合にご利用くださいませ。
11. ホックスの角に丸い引用マークかわいく見せたいときに使うと良いでしょう。引用マークは左上だけでも良いかもしれません（blockquote:after {~}をまるっと削除すれば右下のマークは消えます）。
12. モノクロバージョン白黒版です。こちらも必要に応じて右下の引用マークを消してくださいませ。
13. メリハリのあるデザインに引用を示す部分と文章をはっきりと分けてみました。比較的使いやすいのではないでしょうか。borderプロパティのカラーコード「#3ca5d4」を書き換えることで、色を変えることができます。
1
14. 背景を薄く塗りつぶした場合線を使わずに塗りつぶしてみました。形はさきほどと同じです。
15. モノクロ＋影質素な見た目にして、影をつけています。影が不要であれば、box-shadow:~;を削除してくださいませ。
16. 爽やか引用符を少しユニークな形にして、左角に配置しました。柔らかい雰囲気を出したいときに使うのが良いでしょう。
17. 引用符を丸で囲った場合引用符を円で囲み、オレンジ系統でまとめてみました。
18. ピンクバージョンさきほどの色違いです。ウェブサイトの雰囲気に合わせて選んで頂ければと思います。
19. 青バージョン青バージョンです。１番使いやすい配色かもしれません。
20. 上から吊り下げてみた場合からぴょこんと垂れ下がったようなレイアウトにしてみました。上の線（border-top）は不要であれば消してくださいませ。
21. ピンクバージョン上の色違いのものです。
22. 青バージョン同様に、色違いのものです。
23. 華やかにリボンをつけたようなデザインにしてみました。少しは派手ですが、目を引くはずです。
24. 少しシックな配色にさきほどと形は同じですが、落ち着きのある配色にしてみました。
25. 紙が折り込まれたようなデザインに横から紙が折り込まれているようなデザインです。必要に応じてボックスの下線（blockquote のborder-bottom:~;）を削除してもらえればと思います。
26. 影を付けたみた場合使いやすい配色にして、さらに影をつけてみました。より奥行きがあるように見えるはずです。
27. 上から折り込んだ場合上から折り目のついて紙がかかっているような見た目にしてみました。目を引くわりに派手すぎず使いやすいかもしれません。
28. 引用符を背景に大きく配置引用符を思い切って大きくし、さらに文字の下に少し配置してみました。少し読みづらいかもしれませんが、その分ボックスのサイズはミニマムになります。
29. かわいい配色になんとなく桜っぽい配色にしてみました。
30. 爽やかでやさしい配色に爽やかで透明感のある配色にしてみました。