サイドリンクバーにwebフォントでリストマークをつける

SharePoint3分クッキングの時間がやってまいりましたー。
と、いうわけで、またしても3分でできる小ネタをご紹介します。
(SharePoint2013のオンプレ環境、ブラウザはIE11で検証しました)

サイドリンクバーのエントリに、好きなリストマークをつけたい!と思い立っても、画像を準備して表示させるのは結構面倒です。やる気が失せがちです。
そんなとき、webフォントでさくっとリストマークを表示できれば便利ですよね。

というので、定番webアイコンフォント Font Awesome を利用してリストマークをつけてみました。

できあがりはこんな感じです。
20150513

なお、Font Awesomeの基本的な使い方などは、以下をご参考に。
アイコンをWebフォントで表示! Font Awesomeの使い方 [ホームページ作成] All About.

CSSです。

@import "//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css";

.ms-core-listMenu-verticalBox > ul > li:first-child .ms-core-listMenu-item::before {
    content: "\f015";
    font-family: FontAwesome;
    margin-right: 5px;
    width:1em;
}

.ms-core-listMenu-verticalBox ul li ul li .ms-core-listMenu-item::before {
    content: "\f101";
    font-family: FontAwesome;
    margin-right: 3px;
    width:1em;
}

こういうちょっとしたことでも、サイトの雰囲気はずいぶん変わるので、気が向いたときに試してみていただければと思います。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中