FontAwesome Sample

見出し

見出しのコピペで使えるFontAwesomeサンプル集です。見出しはサイトのデザインでも大事な部分なので見栄えの良い見出しを使いましょう。こちらの見出しのサンプルでは基本的に文字が折り返すことも想定して作成されていますのでレスポンシブデザインにも対応できます。

アイコンが前にくる見出し

Title

<h1 class="fas_header_before">Title</h1>
.fas_header_before{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 0 0 0 calc(1em + 5px);	
	color: #333;
}
.fas_header_before:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
}

小見出しで使えるアイコンのみのシンプルな見出しサンプルです。アイコンは擬似要素で表示していますが、position: absolute;で位置調整して表示することで文字が折り返した場合に対応しています。

アイコンの大きさを変える

Check

<h1 class="fas_header_beforesize">Check</h1>
.fas_header_beforesize{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 10px 0 10px calc(24px + 5px);	
	color: #333;
}
.fas_header_beforesize:before{
	position: absolute;
	top: 5px;
	left: 0;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
}

アイコンを大きくした見出しのサンプルです。アイコンの大きさは擬似要素のfont-sizeで指定しており、topで高さの調節をおこなっています。

下線付き見出し

Point

<h1 class="fas_header_borderbottom">Point</h1>
.fas_header_borderbottom{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 5px 5px 5px calc(1em + 5px);
	border-bottom: 1px solid #333;
	color: #333;
}
.fas_header_borderbottom:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0a9';
}

下線付きの見出しサンプルです。下線はborder-bottomで設定しており、paddingで余白を調節しています。

下線付き見出し（二重線）

Topics

<h1 class="fas_header_borderbottomdouble">Topics</h1>
.fas_header_borderbottomdouble{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 5px 5px 5px calc(1em + 5px);
	border-bottom: 3px double #333;
	color: #333;
}
.fas_header_borderbottomdouble:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
}

二重線の下線が付いた見出しのサンプルです。borderのスタイルをdoubleにすることで二重線を表示しています。

下線付き見出し（点線）

Help

<h1 class="fas_header_borderbottomdot">Help</h1>
.fas_header_borderbottomdot{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 5px 5px 5px calc(1em + 5px);
	border-bottom: 2px dotted #333;
	color: #333;
}
.fas_header_borderbottomdot:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f059';
}

点線の下線が付いた見出しのサンプルです。borderのスタイルをdottedにすることで点線を表示しています。

下線付き見出し（破線）

重要

<h1 class="fas_header_borderbottomdashed">重要</h1>
.fas_header_borderbottomdashed{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 5px 5px 5px calc(1em + 5px);
	border-bottom: 2px dashed #333;
	color: #333;
}
.fas_header_borderbottomdashed:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f06a';
}

破線の下線が付いた見出しのサンプルです。borderのスタイルをdashedにすることで破線を表示しています。

上下線付き見出し

解説

<h1 class="fas_header_bordertopbottom">解説</h1>
.fas_header_bordertopbottom{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 5px 8px calc(1em + 5px);
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	color: #333;
}
.fas_header_bordertopbottom:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
}

上下に線がはいった見出しのサンプルです。border-topとborder-bottomで上下に線をいれており、paddingで余白の設定をしています。

背景色ありの見出し

Title

<h1 class="fas_header_back">Title</h1>
.fas_header_back{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #6699cc;
	color: #fff;
}
.fas_header_back:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
}

背景色がある見出しのサンプルです。背景色はbackgroundで設定しており、paddingで余白を設けています。

角丸の見出し

Check

<h1 class="fas_header_radius">Check</h1>
.fas_header_radius{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #6699cc;
	color: #fff;
	border-radius: 8px;
}
.fas_header_radius:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
}

背景色があり角丸になっている見出しのサンプルです。border-radiusで角丸の指定をおこなっています。

角丸の見出し（上のみ）

Point

<h1 class="fas_header_radiustop">Point</h1>
.fas_header_radiustop{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #6699cc;
	color: #fff;
	border-radius: 8px 8px 0 0;
}
.fas_header_radiustop:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0a9';
}

上のみが角丸になっている見出しのサンプルです。border-radiusは左上・右上・右下・左下の順番で角丸の指定ができるので左上・右上のみに数値を設定することで上だけ角丸にすることができます。

左右が丸い見出し

Information

<h1 class="fas_header_roundness">Information</h1>
.fas_header_roundness{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 13px 8px calc(1em + 18px);
	background: #6699cc;
	color: #fff;
	border-radius: calc(0.7em + 8px);
}
.fas_header_roundness:before{
	position: absolute;
	left: 13px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f05a';
}

両端が丸い見出しのサンプルです。border-radius"では高さの半分の円で角丸になるように設定することで両端が丸い見出しにしています。この見出しは文字が折り返したときには両端が丸くなりませんのでご注意ください。

背景＋下線の見出し

Comments

<h1 class="fas_header_backborderbottom">Comments</h1>
.fas_header_backborderbottom{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #e0ecf9;
	color: #3366cc;
	border-bottom: 2px solid #3366cc;
}
.fas_header_backborderbottom:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f4ad';
}

背景と下線を組み合わせた見出しのサンプルです。背景はbackground、下線はborder-bottomで指定しています。余白はpaddingで設定しています。

背景＋上線の見出し

News

<h1 class="fas_header_backbordertop">News</h1>
.fas_header_backbordertop{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #e0ecf9;
	color: #3366cc;
	border-top: 2px solid #3366cc;
}
.fas_header_backbordertop:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0ac';
}

背景と上線を組み合わせた見出しのサンプルです。背景はbackground、上線はborder-topで指定しています。余白はpaddingで設定しています。

影付きの見出し

Weather

<h1 class="fas_header_shadow">Weather</h1>
.fas_header_shadow{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #e0ecf9;
	color: #3366cc;
	border: 1px solid #3366cc;
	box-shadow: 0 0 2px 2px #dcdcdc;
}
.fas_header_shadow:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f185';
}

背景と枠線に影を付けた見出しのサンプルです。影はbox-shadowで指定しています。上下左右に影ができるように設定しています。

右下影付きの見出し

使い方

<h1 class="fas_header_shadowrightbottom">使い方</h1>
.fas_header_shadowrightbottom{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #e0ecf9;
	color: #3366cc;
	border: 1px solid #3366cc;
	box-shadow: 4px 4px 2px 0 #dcdcdc;
}
.fas_header_shadowrightbottom:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f7d9';
}

右下に影を付けた見出しのサンプルです。box-shadowの前２つの数値で横位置・縦位置を指定することで右下の影がくるようにしています。

内部の影付きの見出し

注目

<h1 class="fas_header_shadowinset">注目</h1>
.fas_header_shadowinset{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #e0ecf9;
	color: #3366cc;
	border: 1px solid #3366cc;
	box-shadow: 2px 2px 2px 0 #aad3ff inset;
}
.fas_header_shadowinset:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f0a4';
}

背景の内部に影をつけて窪んだ風に見える見出しのサンプルです。box-shadowにinsetを指定することで内部に影をつけることができます。

背景がグラデーションの見出し

目次

<h1 class="fas_header_gradation">目次</h1>
.fas_header_gradation{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #2ac9f9;
	background: -moz-linear-gradient(top, #2ac9f9 0%, #405fed 100%);
	background: -webkit-linear-gradient(top, #2ac9f9 0%, #405fed 100%);
	background: linear-gradient(to bottom, #2ac9f9 0%, #405fed 100%);
	color: #fff;
}
.fas_header_gradation:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0ca';
}

背景がグラデーションになった見出しのサンプルです。background: linear-gradient(〜);で背景をグラデーションにしています。グラデーションは色はもちろん角度も変えられるので応用することでいろんな背景を作ることができます。

背景が透過していく見出し

Access

<h1 class="fas_header_transparentgradation">Access</h1>
.fas_header_transparentgradation{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #e0ecf9;
	background: -moz-linear-gradient(left,  rgba(224,236,249,1) 0%, rgba(224,236,249,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(224,236,249,1) 0%,rgba(224,236,249,0) 100%);
	background: linear-gradient(to right,  rgba(224,236,249,1) 0%,rgba(224,236,249,0) 100%);
	color: #3366cc;
}
.fas_header_transparentgradation:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f3c5';
}

背景が右に向かって透過していく見出しのサンプルです。背景を同じ色のグラデーションにしてrgbaで透明度を0%から100%に変化させていっています。

背景がストライプの見出し

Help

<h1 class="fas_header_stripe">Help</h1>
.fas_header_stripe{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background-color: #f4f9ff;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ecf5ff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ecf5ff),color-stop(.75, #ecf5ff), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 20px 20px;
	color: #3366cc;
}
.fas_header_stripe:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f059';
}

背景がストライプになった見出しのサンプルです。background-colorで背景を指定して、background-imageで斜めに入るストライプを表現しています。

アイコンと文字を発光させた見出し

Contact

<h1 class="fas_header_luminous">Contact</h1>
.fas_header_luminous{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #6699cc;
	color: #fff;
	text-shadow: 0 0 8px #fff;
}
.fas_header_luminous:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0e0';
}

アイコンと文字を発光させたような見出しのサンプルです。text-shadowで文字に薄く影を付けることで文字が発光しているように見せています。

途中で色が変わる下線の見出し

How to use

<h1 class="fas_header_bordercolorchange">How to use</h1>
.fas_header_bordercolorchange{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 0 0 5px calc(1em + 5px);	
	color: #333;
	border-bottom: 4px solid #ddd;
}
.fas_header_bordercolorchange:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f058';
}
.fas_header_bordercolorchange:after{
	position: absolute;
	bottom: -4px;
	display: block;
	width: 80px;
	height: 4px;
	background: #6699cc;
	left: 0;
	content: '';
}

途中で色が変わる下線の見出しサンプルです。擬似要素:afterで短い下線を作って、通常の下線の上に置くことで下線の色が途中で変わっているように表現しています。:afterのwidthの値を変更すれば色が付いた部分の長さを変更できます。

グラデーション下線の見出し

Check

<h1 class="fas_header_bordergradation">Check</h1>
.fas_header_bordergradation{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 0 0 5px calc(1em + 5px);	
	color: #405fed;
}
.fas_header_bordergradation:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00c';
}
.fas_header_bordergradation:after{
	position: absolute;
	bottom: -4px;
	display: block;
	width: 100%;
	height: 4px;
	background: #405fed;
	background: -moz-linear-gradient(left, #405fed 0%, #2ac9f9 100%);
	background: -webkit-linear-gradient(left, #405fed 0%, #2ac9f9 100%);
	background: linear-gradient(to right, #405fed 0%, #2ac9f9 100%);
	left: 0;
	content: '';
}

グラデーション下線が付いた見出しサンプルです。擬似要素:afterをブロック要素にして背景をグラデーションにすることで下線を作り出しています。

消えていく下線の見出し

Information

<h1 class="fas_header_bordertransparent">Information</h1>
.fas_header_bordertransparent{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 0 0 5px calc(1em + 5px);	
	color: #6699cc;
}
.fas_header_bordertransparent:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f4ad';
}
.fas_header_bordertransparent:after{
	position: absolute;
	bottom: -4px;
	display: block;
	width: 100%;
	height: 4px;
	background: rgba(102, 153, 204, 1);
	background: -moz-linear-gradient(left, rgba(102, 153, 204, 1) 0%, rgba(102, 153, 204, 0) 100%);
	background: -webkit-linear-gradient(left, rgba(102, 153, 204, 1) 0%, rgba(102, 153, 204, 0) 100%);
	background: linear-gradient(to right, rgba(102, 153, 204, 1) 0%, rgba(102, 153, 204, 0) 100%);
	left: 0;
	content: '';
}

消えていく下線が付いた見出しサンプルです。擬似要素:afterをブロック要素にして背景の透過度を上げていくことで徐々に消えていく下線を表現しています。

ストライプ下線の見出し

Bookmark

<h1 class="fas_header_borderstripe">Bookmark</h1>
.fas_header_borderstripe{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 0 0 5px calc(1em + 5px);	
	color: #6699cc;
}
.fas_header_borderstripe:before{
	position: absolute;
	left: 0;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f005';
}
.fas_header_borderstripe:after{
	position: absolute;
	bottom: -6px;
	display: block;
	width: 100%;
	height: 6px;
	background-color: #ecf5ff;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #d6e1ed), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #d6e1ed),color-stop(.75, #d6e1ed), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 14px 14px;
	left: 0;
	content: '';
}

ストライプの下線が付いた見出しサンプルです。擬似要素:afterをブロック要素にして背景をストライプに設定することで下線にしています。

吹き出しの見出し

Point

<h1 class="fas_header_balloon">Point</h1>
.fas_header_balloon{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #6699cc;
	color: #fff;
	border-radius: 8px;
}
.fas_header_balloon:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f058';
}
.fas_header_balloon:after{
	content: "";
	position: absolute;
	bottom: -6px;
	left: 14px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: #6699cc transparent transparent transparent;
	border-width: 6px 6px 0 6px;
}

吹き出しの見出しサンプルです。背景と角丸を付けた見出しに擬似要素の:afterで三角形を作り、見出しにくっつけています。三角形はbottomで下に付くようにしています。

枠線の吹き出し見出し

Entry

<h1 class="fas_header_balloonborder"><i class="fas fa-check-circle"></i>Entry</h1>
.fas_header_balloonborder{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 8px 8px 8px calc(1em + 13px);
	background: #fff;
	color: #6699cc;
	border: 2px solid #6699cc;
	border-radius: 8px;
}
.fas_header_balloonborder i{
	display: inline-block;
	position: absolute;
	top: 8px;
	left: 8px;
	line-height: 1.4;
}
.fas_header_balloonborder:before,
.fas_header_balloonborder:after{
	content: "";
	position: absolute;
	left: 14px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	border-width: 8px 8px 0 8px;
}
.fas_header_balloonborder:before{
	z-index: 1;
	bottom: -5px;
	border-color: #fff transparent transparent transparent;
}
.fas_header_balloonborder:after{
	bottom: -8px;
	border-color: #6699cc transparent transparent transparent;
}

枠線で形を作った吹き出しの見出しサンプルです。擬似要素の:beforeで白い三角形、:afterで枠線の色の三角形を作って吹き出し部分を表現しています。擬似要素を三角形で使ってるのでアイコンはiタグで表示しています。

ステッチ風な線が入った見出し

Profile

<h1 class="fas_header_stitch">Profile</h1>
.fas_header_stitch{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	margin: 0 0 10px 0;
	padding: 8px 8px 8px calc(1em + 13px);
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	background: #6699cc;
	color: #fff;
	box-shadow: 0 0 0 5px #6699cc;
	border-top: 1px dashed #fff;
	border-bottom: 1px dashed #fff;
}
.fas_header_stitch:before{
	position: absolute;
	left: 8px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f007';
}

上下にステッチ風に波線を入れた見出しのサンプルです。box-shadowで背景と同じ枠を作り、border-topとborder-bottomで波線を上下に入れています。box-shadowで増えている横幅や高さの分をtop、left、widthで調節しています。