スナックelve 本店

バツイチ40代女の日記です

No.1517 Font Awesomeいらなかった・・・。

えーっと。そもそもなんでそんなものをっていわれると引用のときに「」を表示させたかったわけですよ。
そんでね、ほら皆さんの端末(パソコンやらスマホ)に同じフォントがあればそれで表示を統一できるわけですが

<p style="font-family: sans-serif">"</p>
<p style="font-family: serif">"</p>

これで

"

"

こう見えるわけですよ。いや、どう見えてるわからないんだけど。

そーれーでーFont Awesomeってフォントをこのページ読み込むときに一緒に読み込んでもらって

ここに使おう

ってのが今までのお話です。


elve.hatenadiary.jp
elve.hatenadiary.jp
elve.hatenadiary.jp


でね、でね、はてなブログのテーマを読み込むときに同じように「blogicon」ってフォントを読み込んでるらしいのですよ。ここに引用符があれば追加でフォントを読み込ませなくてもいいのになぁ~って思って。はてなに要望出そうかなぁって思ったら
zeno-teal.hatenablog.com
\有 り ま し た /

でも、閉じるほうの「”」がないなぁ→あ、回転させればいいのか! というわけで

/* <system section="theme" selected="aero2"> */
@import "/css/theme/aero2/aero2.css";
/* </system> */

/* <system section="background" selected="490A3D"> */
body{background:#303;}
/* </system> */

#main{background:#fef;}
p {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
}
.entry-content blockquote {
    position: relative;
    padding: 10px 20px;
    box-sizing: border-box;
    font-style: italic;
    color: #4e4e4e;
    background: #fff3e1;
}

.entry-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    vertical-align: middle;
    content: "\f704";
    font-family: blogicon;
    color: #ffe2b8;
    font-size: 40px;
    line-height: 1;
}

.entry-content blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    vertical-align: middle;
    text-align: center;
    content: "\f704";
    font-family: blogicon;
    color: #ffe2b8;
    font-size: 40px;
    line-height: 1;
    transform: rotate(180deg);
}

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

.entry-content blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/*デフォルトのアイコン*/
.hatena-module-title:before{
    content: "\f010";
    display: inline-block;
    font-family: blogicon;
    margin-right: 4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* プロフィール */
.hatena-module-profile .hatena-module-title:before{
    content: "\f00c";
}

/* 検索 */
.hatena-module-search-box .hatena-module-title:before{
    content: "\f01a";
}

/* リンク */
.hatena-module-links .hatena-module-title:before{
    content: "\f042";
}

/* 最近のコメント */
.hatena-module-recent-comments .hatena-module-title:before{
    content: "\f01d";
}