CSSでチェックマークを文頭に付ける方法【ファビコン版】

こんにちは、mickです。

CSSの勉強でチェックマークを文頭に付ける記事を紹介しました。

ここではコレを改造したファビコン版としてチェックマークを文頭につける方法を紹介します。

段落（P要素）の文頭にチェックマークを付ける
まとめ。

段落（P要素）の文頭にチェックマークを付ける

段落（P要素）の文頭にチェックマークを付けていきます。

前の記事で紹介したファビコンなし版プレビュー

前の記事で紹介したファビコンなし版プレビューはこちら。

チェックマークを文頭に付けてみた

今回の実装したファビコン版プレビュー

今回の記事で紹介するファビコン版プレビューはこちら。

チェックマークを文頭に付けてみた

具体的なCSSコーディング

.check-mark {
	font-size: 1.1rem;
	font-weight: bold;
	position: relative; /*ファビコンを動かす基準にする*/
	padding-left: 1.1rem; /*font-sizeと同じにするとバランスがいい*/
}
.check-mark::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
position: absolute; /*上の基準からabsoluteで位置を調整*/
left: -0.4rem; /* アイコンのスタート位置 */
color: #4169e1;
}