FontAwesome Sample

文字装飾

文字装飾のコピペで使えるFontAwesomeのサンプル集です。アイコンを付けただけのシンプルなものから、ボーダー・背景・吹き出し・リボンなど様々なサンプルを用意しました。

文字の前にアイコン

Check
<span class="fas_char_before">Check</span>
.fas_char_before{
	color: #333;
}
.fas_char_before:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
	margin-right: 5px;
}

文字の前にアイコンが表示されるシンプルな装飾です。アイコンは擬似要素の:beforeで表示していて、margin-rightを設定することで文字との間隔を調整しています。スタイル設定でアイコンを変えたり、文字色を変えたりすることができます。

文字の後ろにアイコン

Point
<span class="fas_char_after">Point</span>
.fas_char_after{
	color: #333;
}
.fas_char_after:after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f0a4';
	margin-left: 5px;
}

文字の後ろにアイコンが表示される装飾です。アイコンは擬似要素の:afterで表示し、margin-leftで文字との間隔を調整しています。

文字の前後にアイコン

Topics
<span class="fas_char_side">Topics</span>
.fas_char_side{
	color: #333;
}
.fas_char_side:before, .fas_char_side:after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f068';
}
.fas_char_side:before{
	margin-right: 5px;
}
.fas_char_side:after{
	margin-left: 5px;
}

文字の前後にアイコンを表示させています。:beforeと:afterでアイコンの設定をおこなっています。このサンプルでは同じアイコンを表示させていますが、前後で別々のアイコンを表示させることもできます。

下線付き文字

Comment
<span class="fas_char_borderbottom">Comment</span>
.fas_char_borderbottom{
	display: inline-block;
	line-height: 1;
	padding: 0 3px 3px 3px;
	color: #333;
	border-bottom: 1px solid #333;
}
.fas_char_borderbottom:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f075';
	margin-right: 5px;
}

下線＋アイコンの装飾です。文字の領域をdisplay:inline-block;にしborder-bottomで下線を表示しています。paddingで余白の設定をすれば文字と下線の間隔を調整できます。

上下線付き文字

Address
<span class="fas_char_bordertopbottom">Address</span>
.fas_char_bordertopbottom{
	display: inline-block;
	line-height: 1;
	padding: 8px;
	color: #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}
.fas_char_bordertopbottom:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f3c5';
	margin-right: 5px;
}

上下に線が入った見出しのような装飾です。border-topとborder-bottomで上下の線を設定しています。上下の線が別々の設定なので上下の線を違うスタイルにすることもできます。

背景色ありの文字

New
<span class="fas_char_back">New</span>
.fas_char_back{
	display: inline-block;
	line-height: 1;
	padding: 5px 8px;
	background: #3366cc;
	color: #fff;	
}
.fas_char_back:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f005';
	margin-right: 5px;
}

背景色ありの文字装飾です。backgroundで背景色、colorで文字色を設定しています。paddingの設定を変えれば余白の設定をおこなうことができます。

背景色ありの文字（角丸）

Tag
<span class="fas_char_backradius">Tag</span>
.fas_char_backradius{
	display: inline-block;
	line-height: 1;
	padding: 5px 8px;
	background: #3366cc;
	color: #fff;	
	border-radius: 5px;
}
.fas_char_backradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f02b';
	margin-right: 5px;
}

背景色ありの装飾で角丸にしたサンプルです。border-radiusで角丸の設定をおこなっています。角丸の設定には-webkit-border-radiusや-moz-border-radiusのベンダープレフィックスを付けた設定もおこなっています。

両側が丸い背景

Help
<span class="fas_char_roundness">Help</span>
.fas_char_roundness{
	display: inline-block;
	line-height: 1;
	padding: 5px 0.8em;
	background: #3366cc;
	color: #fff;
	border-radius: calc(0.5em + 5px);
}
.fas_char_roundness:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f128';
	margin-right: 5px;
}

両側が丸まった背景のサンプルです。border-radius: calc(0.5em + 5px);で高さの半分の円になる角丸設定をおこなうことで両端を丸くなるように設定しています。

吹き出し（下向き）

Hot
<span class="fas_char_balloon">Hot</span>
.fas_char_balloon{
	position: relative;
	display: inline-block;
	line-height: 1;
	padding: 8px 10px;
	margin-bottom: 10px;
	background: #3366cc;
	color: #fff;	
	border-radius: 5px;
}
.fas_char_balloon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f06d';
	margin-right: 5px;
}
.fas_char_balloon:after{
	content: "";
	position: absolute;
	bottom: -6px;
	left: 14px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: #3366cc transparent transparent transparent;
	border-width: 6px 6px 0 6px;
}

下向きの吹き出しサンプルです。擬似要素の:beforeでアイコンの設定をおこない、:afterで三角形を表現することで吹き出しを作成しています。三角形の位置はbottomとleftで設定しています。

吹き出し（上向き）

HashTag
<span class="fas_char_balloontop">HashTag</span>
.fas_char_balloontop{
	position: relative;
	display: inline-block;
	line-height: 1;
	padding: 8px 10px;
	margin-top: 10px;
	background: #3366cc;
	color: #fff;	
	border-radius: 5px;
}
.fas_char_balloontop:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f292';
	margin-right: 5px;
}
.fas_char_balloontop:after{
	content: "";
	position: absolute;
	top: -6px;
	left: 14px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: transparent transparent #3366cc transparent;
	border-width: 0 6px 6px 6px;
}

上向きの吹き出しサンプルです。設定はほぼ下向きの吹き出しサンプルと同様です。違いとしては三角形を上向きに設定していることとtopで位置の指定をおこなっています。

吹き出し（左向き）

UserName
<span class="fas_char_balloonleft">UserName</span>
.fas_char_balloonleft{
	position: relative;
	display: inline-block;
	line-height: 1;
	padding: 8px 10px;
	margin-left: 10px;
	background: #3366cc;
	color: #fff;	
	border-radius: 5px;
}
.fas_char_balloonleft:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f007';
	margin-right: 5px;
}
.fas_char_balloonleft:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -6px;
	margin: auto;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: transparent #3366cc transparent transparent;
	border-width: 6px 6px 6px 0;
}

左向きの吹き出しサンプルです。こちらもほぼ下向き吹き出しサンプルと設定はほぼ同様です。三角形を左向きにして、top: 0;・bottom: 0;・margin: auto;で高さの中央に三角形がくるようにしています。

吹き出し（右向き）

Category
<span class="fas_char_balloonright">Category</span>
.fas_char_balloonright{
	position: relative;
	display: inline-block;
	line-height: 1;
	padding: 8px 10px;
	margin-right: 10px;
	background: #3366cc;
	color: #fff;	
	border-radius: 5px;
}
.fas_char_balloonright:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f07c';
	margin-right: 5px;
}
.fas_char_balloonright:after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -6px;
	margin: auto;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: transparent transparent transparent #3366cc;
	border-width: 6px 0 6px 6px;
}

右向きの吹き出しサンプルです。こちらも下向きサンプルのほぼ同様の設定です。三角形を右向きにしrightで三角形が右側にくるように配置しています。

リボン

Menu
<span class="fas_char_ribbon"><span class="fas_char_ribbon_text">Menu</span></span>
.fas_char_ribbon{
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 15px;
	background: #3366cc;
	color: #fff;	
}
.fas_char_ribbon:before, .fas_char_ribbon:after{
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
}
.fas_char_ribbon:before{
	left: 0;
	border-color: transparent transparent transparent #fff;
	border-width: 15px 0 15px 6px;
}
.fas_char_ribbon:after{
	right: 0;
	border-color: transparent #fff transparent transparent;
	border-width: 15px 6px 15px 0;
}
.fas_char_ribbon_text:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f0c9';
	margin-right: 5px;
}

リボンのような形の文字装飾サンプルです。文字に背景をつけ、擬似要素の:beforeと:afterで白の三角形を作ってリボンの形を表現しています。このサンプルではアイコンはiタグを使って表示しています。

リボン（片側）

解説
<span class="fas_char_ribbonright">解説</span>
.fas_char_ribbonright{
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 20px 0 10px;
	background: #3366cc;
	color: #fff;	
}
.fas_char_ribbonright:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f00c';
	margin-right: 5px;
}
.fas_char_ribbonright:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
	border-width: 15px 6px 15px 0;
}

片側だけリボンの形をした文字装飾サンプルです。擬似要素の:beforeでアイコン設定し、:afterでリボンの三角形を作っています。

平行四辺形

Information
<span class="fas_char_parallelogram"><span class="fas_char_parallelogram_text">Information</span></span>
.fas_char_parallelogram{
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 8px;
	margin: 0 10px;
	background: #3366cc;
	color: #fff;
}
.fas_char_parallelogram:before, .fas_char_parallelogram:after{
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
}
.fas_char_parallelogram:before{
	left: -10px;
	border-color: transparent #3366cc transparent transparent;
	border-width: 30px 10px 0 0;
}
.fas_char_parallelogram:after{
	right: -10px;
	border-color: transparent transparent transparent #3366cc;
	border-width: 0 0 30px 10px;
}
.fas_char_parallelogram_text:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f4ad';
	margin-right: 5px;
}

平行四辺形の形の背景をした文字装飾サンプルです。文字に背景をつけて擬似要素の:beforeと:afterで三角形を両側に付けることで平行四辺形の形にしています。

平行四辺形（反転）

Ranking
<span class="fas_char_parallelogramreverse"><span class="fas_char_parallelogramreverse_text">Ranking</span></span>
.fas_char_parallelogramreverse{
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0 8px;
	margin: 0 10px;
	background: #3366cc;
	color: #fff;
}
.fas_char_parallelogramreverse:before, .fas_char_parallelogramreverse:after{
	content: "";
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
}
.fas_char_parallelogramreverse:before{
	left: -10px;
	border-color: transparent #3366cc transparent transparent;
	border-width: 0 10px 30px 0;
}
.fas_char_parallelogramreverse:after{
	right: -10px;
	border-color: transparent transparent transparent #3366cc;
	border-width: 30px 0 0 10px;
}
.fas_char_parallelogramreverse_text:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f521';
	margin-right: 5px;
}

平行四辺形の反転バージョンのサンプルです。設定はほぼ平行四辺形のものと同じで三角形の形を変えることで反転させたサンプルとなっています。

アイコンと文字で別々の背景色

2000.00.00
<span class="fas_char_divback"><span class="fas_char_divback_text">2000.00.00</span></span>
.fas_char_divback{
	display: inline-block;
	padding: 0;
}
.fas_char_divback:before{
	display: inline-block;
	line-height: 1;
	padding: 8px;
	background: #3366cc;
	color: #fff;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f073';
}
.fas_char_divback .fas_char_divback_text{
	display: inline-block;
	line-height: 1;
	padding: 8px;
	background: #e0ecf9;
}

アイコンと文字が別々の背景色の文字装飾サンプルです。擬似要素のアイコンをdisplay: inline-block;にしpaddingを設定することで文字とアイコンの高さを揃えています。

別々の背景色＆枠線

000-0000-0000
<span class="fas_char_divbackborder"><span class="fas_char_divbackborder_text">000-0000-0000</span></span>
.fas_char_divbackborder{
	display: inline-block;
	padding: 0;
	border: 2px solid #3366cc;
}
.fas_char_divbackborder:before{
	display: inline-block;
	line-height: 1;
	padding: 8px;
	background: #3366cc;
	color: #fff;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f095';
}
.fas_char_divbackborder .fas_char_divbackborder_text{
	display: inline-block;
	line-height: 1;
	padding: 8px;
	background: #e0ecf9;
}

アイコンと文字を別背景にし枠線で囲ったサンプルです。全体の要素にborderで枠線を付けています。アイコンの背景と枠線を同じ色にしています。

アイコンの下に文字

注意
<span class="fas_char_up">注意</span>
.fas_char_up{
	display: inline-block;
	text-align: center;
	color: #3366cc;
}
.fas_char_up:before{
	display: block;
	font-size: 2.4em;
	line-height: 1;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f071';	
}

大きめのアイコンの下に文字が表示されるサンプルです。アイコンをdisplay: block;でブロック要素にすることで文字がアイコンの下にくるようにしています。

アイコンに文字を重ねる

注目 
<span class="fas_char_inside">
	<span class="fas_char_inside_text">注目</span>
</span>
.fas_char_inside{
	display: inline-block;
    height: 3em;
    line-height: 3em;
	min-width: 3em;
    position: relative;
	text-align:center;
}
.fas_char_inside:before{
	position: absolute;
	left: 0;
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 3em;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight : 900;
	content: '\f075';
	color: #3366cc;
}
.fas_char_inside .fas_char_inside_text{
	position: relative;
	top: -0.1em;
	min-width: 100%;
	color: #fff;
	font-size: 1.1em;
}

アイコンの上に文字が重なって表示されるサンプルです。全体の要素の高さを固定にし、その高さに合わせるようにアイコンと文字を表示しています。文字に関してアイコンとの兼ね合いでtopで位置調整をおこなっています。