スナックelve 本店

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

あばうとー  読者になる  follow us in feedly

No.2516 Font Awesomeで、サイドバーにアイコンを

引き続きモバイルで見てくださってる方置いてけぼりの話題です。さーせん。
webフォントってのを読み込ませてるわけですよ、引用符のためだけに。
もったいなくね? と思いまして、サイドバーにアイコンをつけました。

参考にさせていただいたのは
nasust.hatenablog.com

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

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

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


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


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

アイコンはIcons | Font Awesomeでクリックして下のほうに出てくる
f:id:elve:20180324215106p:plain
黄色く塗ったところがfa「b」だと、brandロゴだったりするので使用方法考えてください。


分かりにくいかな。とりさんのアイコンだーって関係ないとこにtwitterのマーク使っちゃ駄目よってことね。わかるよね? ね?