https://simadzu.hatenablog.com/entry/blockquote-icon

はてなロゴ

以前に、はてなブログの引用デザインを画像で表示したのですが、はてなのアイコンフォントにある引用符のアイコンをなんとか利用できないかやってみました。こんな感じ↓

ウィキペディア（英: Wikipedia）は、世界中のボランティアの共同作業によって執筆及び作成されるフリーの多言語インターネット百科事典。
収録されている全ての内容がオープンコンテントで商業広告が存在しないということを特徴とし、主に寄付に依って活動している非営利団体「ウィキメディア財団」が所有・運営している。
引用：ウィキペディア

（設定→カスタマイズ→「デザインCSS」にコードを入力）

CSS
/* 引用全体 */
.entry-content blockquote {
    position: relative;
    margin: 20px 0;
    padding: 16px 52px;
    background: #fff;
    border-coler: #ccc;
    border-radius: 3px;
}

/* 引用符のアイコン */
.entry-content blockquote:before,
.entry-content blockquote:after {
    position: absolute;
    /* 引用符のアイコンの設定 */
    font-family: blogicon;
    font-size: 18px;
    content: "\f704";
    color: #fff;
    line-height: 36px;
    /* 引用符のアイコンの背景 */
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ccc;
    text-align: center;
}

/* 引用符のアイコン（左上） */
.entry-content blockquote:before {
    top: 10px;
    left: 10px;
}

/* 引用符のアイコン（右下） */
.entry-content blockquote:after {
    right: 10px;
    bottom: 10px;
    transform: rotate(180deg);
}

まず、引用符のアイコン（）が左しかないので、そのアイコンを180度回転させて（transform:rotate(180deg)）、右の引用符として使うことにしました。
Takumi Hirashima Artworks｜CSS 要素を回転させる方法

次に、引用符のアイコンの背景を丸くして、その真ん中にアイコンを表示します。
幅（width）と高さ（height）を指定するので、（display:inline-block）にします。
クルーデザイン｜CSS 丸、正円の中に数字・文字を書く！（サンプル付き）

最後に、引用符のアイコンの配置ですが、引用全体（blockquote）を相対位置（position:relative）に、アイコンを絶対位置（position:absolute）にします。
Web白描｜擬似要素：before / after

はてなのアイコンフォントより画像のほうがコードがすっきりしている...。