FontAwesome Sample

メニュー

メニューのコピペで使えるFontAwesomeサンプル集です。ヘッダー・フッター・サイドバーなどでよく使われる複数のリンクで構成されたメニューのサンプルをご紹介します。

縦並びのメニュー

<ul class="fas_menu_vertical">
	<li><a href="{URL}">First</a></li>
	<li><a href="{URL}">Second</a></li>
	<li><a href="{URL}">Third</a></li>
</ul>
.fas_menu_vertical{
	margin: 0;
	padding: 0; 
}
.fas_menu_vertical li{
	list-style: none;
	margin: 0 0 8px 0;
}
.fas_menu_vertical li:last-child{
	margin-bottom: 0px;
}
.fas_menu_vertical li a{
	text-decoration: none;
	display: inline-block;
	position: relative;
	padding: 0 0 0 calc(1em + 5px);	
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_vertical li a:before{
	position: absolute;
	top: 0;
	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';
}

シンプルなアイコン付きの縦並びメニューのサンプルです。marginでリスト同士の間隔を調整しており、:last-childで最後のリストは下の余白ができないようにしています。アイコンはリンクの擬似要素で表現して、position: absolute;で配置することで文字の折り返しにも対応しています。

背景色付き縦並びのメニュー

<ul class="fas_menu_verticalback">
	<li><a href="{URL}">Water</a></li>
	<li><a href="{URL}">Tea</a></li>
	<li><a href="{URL}">Coffee</a></li>
</ul>
.fas_menu_verticalback{
	margin: 0;
	padding: 10px;
	background: #e0ecf9; 
}
.fas_menu_verticalback li{
	list-style: none;
	margin: 0 0 8px 0;
}
.fas_menu_verticalback li:last-child{
	margin-bottom: 0px;
}
.fas_menu_verticalback li a{
	text-decoration: none;
	display: inline-block;
	position: relative;
	padding: 0 0 0 calc(1em + 5px);	
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_verticalback li a:before{
	position: absolute;
	top: 0;
	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: '\f35a';
}

背景色がついたアイコン付きの縦並びメニューのサンプルです。サイドバーなどで使えるメニューです。ulタグに対してpaddingで余白を作ってbackgroundで背景色を設定しています。

リンクが背景色付きの縦並びのメニュー

<ul class="fas_menu_verticallinkback">
	<li><a href="{URL}">Tokyo</a></li>
	<li><a href="{URL}">Osaka</a></li>
	<li><a href="{URL}">Fukuoka</a></li>
</ul>
.fas_menu_verticallinkback{
	margin: 0;
	padding: 0;
}
.fas_menu_verticallinkback li{
	list-style: none;
	margin: 0 0 8px 0;
}
.fas_menu_verticallinkback li:last-child{
	margin-bottom: 0px;
}
.fas_menu_verticallinkback li a{
	text-decoration: none;
	display: block;
	position: relative;
	padding: 8px 5px 8px calc(1em + 10px);	
	line-height: 1.4;
	background: #e0ecf9;
	color: #3366cc; 
}
.fas_menu_verticallinkback li a:before{
	position: absolute;
	top: 8px;
	left: 5px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f058';
}

リンクに個別の背景色がついた縦並びメニューのサンプルです。スマホでもクリックがしやすいリンクメニューです。リンクにpaddingで余白を指定し、backgroundで背景色を設定しています。

アイコンが右側に付く縦並びのメニュー

<ul class="fas_menu_verticallinkbackafter">
	<li><a href="{URL}">Men</a></li>
	<li><a href="{URL}">Women</a></li>
	<li><a href="{URL}">Child</a></li>
</ul>
.fas_menu_verticallinkbackafter{
	margin: 0;
	padding: 0;
}
.fas_menu_verticallinkbackafter li{
	list-style: none;
	margin: 0 0 8px 0;
}
.fas_menu_verticallinkbackafter li:last-child{
	margin-bottom: 0px;
}
.fas_menu_verticallinkbackafter li a{
	text-decoration: none;
	display: block;
	position: relative;
	padding: 8px calc(1em + 10px) 8px 5px;	
	line-height: 1.4;
	background: #e0ecf9;
	color: #3366cc;
}
.fas_menu_verticallinkbackafter li a:after{
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	width: 1em;
	height: 1em;
	line-height: 1em;
	margin: auto;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f105';
}

アイコンが右側に配置された縦並びメニューのサンプルです。liタグの擬似要素を使ってアイコンを表示してrightで右側に表示されるように設定しています。また上下位置は中央にくるようにしています。

枠線付き縦並びメニュー

<ul class="fas_menu_verticalborder">
	<li><a href="{URL}">Dog</a></li>
	<li><a href="{URL}">Cat</a></li>
	<li><a href="{URL}">Bird</a></li>
</ul>
.fas_menu_verticalborder{
	margin: 0;
	padding: 0; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #3366cc;
	border-bottom: none;
}
.fas_menu_verticalborder li{
	list-style: none;
	border-bottom: 1px solid #3366cc;
}
.fas_menu_verticalborder li a{
	text-decoration: none;
	display: block;
	position: relative;
	padding: 8px 5px 8px calc(1em + 10px);	
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_verticalborder li a:before{
	position: absolute;
	top: 8px;
	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: '\f0da';
}
.fas_menu_verticalborder li a:hover{
	background: #3366cc;
	color: #fff;
}

サイドバーなどでよく利用される枠線付きの縦並びメニューのサンプルです。ulタグにborderを、各リストにborder-bottomを設定しています。a:hoverでマウスオーバー時の背景色と文字色の設定をおこなっています。

横並びのメニュー

<ul class="fas_menu_horizon">
	<li><a href="{URL}">Football</a></li>
	<li><a href="{URL}">Baseball</a></li>
	<li><a href="{URL}">Basketball</a></li>
</ul>
.fas_menu_horizon{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;	
}
.fas_menu_horizon li{
	list-style: none;
	margin: 0 20px 0 0;
}
.fas_menu_horizon li:last-child{
	margin-right: 0px;
}
.fas_menu_horizon li a{
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_horizon li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
	margin-right: 5px;
}

シンプルなアイコン付き横並びメニューのサンプルです。ulタグにdisplay: flex;を指定することでリストが横並びになるようにしています。各リストの間隔はmarginで調整しています。

区切りがある横並びのメニュー

<ul class="fas_menu_horizonsplit">
	<li><a href="{URL}">Home</a></li>
	<li><a href="{URL}">Contact</a></li>
	<li><a href="{URL}">Sitemap</a></li>
</ul>
.fas_menu_horizonsplit{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;	
}
.fas_menu_horizonsplit li{
	list-style: none;
	margin: 0 15px 0 0;
}
.fas_menu_horizonsplit li:last-child{
	margin-right: 0px;
}
.fas_menu_horizonsplit li a{
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_horizonsplit li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0da';
	margin-right: 3px;
}
.fas_menu_horizonsplit li a:after{
	content: '|';
	margin-left: 15px;
	color: #99ccff;
}
.fas_menu_horizonsplit li:last-child a:after{
	content: '';
	margin-left: 0;
}

区切りがある横並びメニューのサンプルです。フッターでよく見かける形のメニューです。aタグの:beforeでアイコンを表示し、:afterで区切り線を表現しています。

中央配置の横並びのメニュー

<ul class="fas_menu_horizoncenter">
	<li><a href="{URL}">Single</a></li>
	<li><a href="{URL}">Double</a></li>
	<li><a href="{URL}">Triple</a></li>
</ul>
.fas_menu_horizoncenter{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;	
}
.fas_menu_horizoncenter li{
	list-style: none;
	margin: 0 20px 0 0;
}
.fas_menu_horizoncenter li:last-child{
	margin-right: 0px;
}
.fas_menu_horizoncenter li a{
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_horizoncenter li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0a9';
	margin-right: 3px;
}

中央配置の横並びメニューのサンプルです。ulタグをflexボックスにしてjustify-content: center;でメニューが中央にくるように設定しています。

背景色が付いた横並びのメニュー

<ul class="fas_menu_horizonback">
	<li><a href="{URL}">Left</a></li>
	<li><a href="{URL}">Center</a></li>
	<li><a href="{URL}">Right</a></li>
</ul>
.fas_menu_horizonback{
	margin: 0;
	padding: 10px;
	background: #e0ecf9; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;	
}
.fas_menu_horizonback li{
	list-style: none;
	margin: 0 20px 0 0;
}
.fas_menu_horizonback li:last-child{
	margin-right: 0px;
}
.fas_menu_horizonback li a{
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_horizonback li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f14a';
	margin-right: 3px;
}

背景色が付いた横並びメニューのサンプルです。ulタグに余白を設定してbackgroundで背景色を指定しています。

均等な横幅の横並びメニュー

<ul class="fas_menu_horizonequal">
	<li><a href="{URL}">Pop</a></li>
	<li><a href="{URL}">Rock</a></li>
	<li><a href="{URL}">Jazz</a></li>
</ul>
.fas_menu_horizonequal{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: space-between;
	flex-wrap: wrap;	
}
.fas_menu_horizonequal li{
	list-style: none;
	margin: 0;
	width: calc((100% / 3) - 5px);
}
.fas_menu_horizonequal li:last-child{
	margin-right: 0px;
}
.fas_menu_horizonequal li a{
	text-decoration: none;
	display: block;
	padding: 8px 5px;
	text-align: center;
	background: #e0ecf9;
	color: #3366cc;
	line-height: 1.4;
}
.fas_menu_horizonequal li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f101';
	margin-right: 3px;
}

横幅に対して均等な幅のリンクで構成される横並びメニューのサンプルです。liタグの幅をwidth: calc((100% / 3) - 5px);で横幅をリンクの個数で割り間を空けるために5px引いた幅に設定しています。flexボックスでjustify-content: space-between;を指定することで両端に間を空けずに等間隔で配置することができます。

アイコンが上にくる横並びメニュー

<ul class="fas_menu_horizontopicon">
	<li><a href="{URL}"><i class="fas fa-home"></i>Home</a></li>
	<li><a href="{URL}"><i class="fas fa-rss-square"></i>RSS</a></li>
	<li><a href="{URL}"><i class="fas fa-envelope-square"></i>Contact</a></li>
</ul>
.fas_menu_horizontopicon{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_menu_horizontopicon li{
	list-style: none;
	margin: 0 10px 0 0;
	width: 50px;
	text-align: center;
}
.fas_menu_horizontopicon li:last-child{
	margin-right: 0px;
}
.fas_menu_horizontopicon li a{
	text-decoration: none;
	display: inline-block;
	font-size: 0.8em;
	line-height: 1.4;
	color: #3366cc;
}
.fas_menu_horizontopicon li a i{
	display: block;
	font-size: 2.4em;
	line-height: 1em;
	margin-bottom: 5px;
}

ヘッダーなどでよく使われるアイコンの下に文字がはいるメニューのサンプルです。アイコンは個別に指定できるようにiタグにしています。iタグをブロック要素にして文字が下にくるようにしています。

アイコンのみの横並びメニュー

<ul class="fas_menu_horizonicon">
	<li><a href="{URL}"><i class="fas fa-bars"></i></a></li>
	<li><a href="{URL}"><i class="fas fa-bell"></i></a></li>
	<li><a href="{URL}"><i class="fas fa-cog"></i></a></li>
</ul>
.fas_menu_horizonicon{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_menu_horizonicon li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_menu_horizonicon li:last-child{
	margin-right: 0px;
}
.fas_menu_horizonicon li a{
	text-decoration: none;
	display: inline-block;
	color: #3366cc;
}
.fas_menu_horizonicon li a i{
	display: block;
	font-size: 1.6em;
	line-height: 1em;
	width: 1.25em;
	text-align: center;
}

ヘッダーなどでよく見るアイコンのみのメニューサンプルです。このメニューもアイコンが個別に指定できるようにiタグで指定できるようにしています。アイコン同士の間隔はリストのmarginで調節をおこなっています。

ボーダー付きの横並びのメニュー

<ul class="fas_menu_border">
	<li><a href="{URL}">Menu</a></li>
	<li><a href="{URL}">Setting</a></li>
	<li><a href="{URL}">Logout</a></li>
</ul>
.fas_menu_border{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;	
}
.fas_menu_border li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_menu_border li:last-child{
	margin-right: 0px;
}
.fas_menu_border li a{
	text-decoration: none;
	display: inline-block;
	width: 100px;
	padding: 8px 0;
	line-height: 1;
	text-align: center;
	border-bottom: 3px solid #e0ecf9;
	color: #3366cc;
}
.fas_menu_border li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f138';
	margin-right: 5px;
}
.fas_menu_border li a:hover{
	border-bottom: 3px solid #3366cc;
}

下線のボーダー付きメニューのサンプルです。リンクタグにborder-bottomで下線を引いています。またa:hoverでマウスオーバー時に下線の色が変わるようにしています。

タブ風のメニュー

<ul class="fas_menu_tab">
	<li><a href="{URL}">News</a></li>
	<li><a href="{URL}">Sports</a></li>
	<li><a href="{URL}">Finance</a></li>
</ul>
.fas_menu_tab{
	margin: 0;
	padding: 0; 
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_menu_tab li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_menu_tab li:last-child{
	margin-right: 0px;
}
.fas_menu_tab li a{
	text-decoration: none;
	display: inline-block;
	width: 100px;
	line-height: 40px;
	background: #6699cc;
	color: #fff;
	text-align: center;
	border-radius: 5px 5px 0 0;
}
.fas_menu_tab li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f35a';
	margin-right: 5px;
}

タブ風のメニューサンプルです。各リンクにborder-radiusで上部だけを角丸にすることでタブのような表示にしてあります。タブの間隔はリストタグのmarginで調整しています。JQueryのサンプルページではタブで領域を切り替えるサンプルも用意していますのでそちらも参考にしてください。
タブで表示領域を切り替えるサンプル

グローバルメニュー

<ul class="fas_menu_globalmenu">
	<li><a href="{URL}">TOP</a></li>
	<li><a href="{URL}">CATEGORY</a></li>
	<li><a href="{URL}">PAGE</a></li>
	<li><a href="{URL}">SITEMAP</a></li>
</ul>
.fas_menu_globalmenu{
	margin: 0;
	padding: 0; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	width: 100%;
	border: 1px solid #3366cc;
}
.fas_menu_globalmenu li{
	list-style: none;
	width: calc(100% / 4);
	border-right: 1px solid #3366cc;
}
.fas_menu_globalmenu li:last-child{
	border-right: none;
}
.fas_menu_globalmenu li a{
	text-decoration: none;
	display: inline-block;
	width: 100%;
	line-height: 40px;
	background: #6699cc;
	color: #fff;
	text-align: center;
}
.fas_menu_globalmenu li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0da';
	margin-right: 5px;
}

サイト上部のグローバルメニューとして使われるメニューのサンプルです。ulタグの横幅を100%にして、liタグの幅をメニューの個数で割った幅にしています。

立体的なグローバルメニュー

<ul class="fas_menu_globalmenutd">
	<li><a href="{URL}">TOP</a></li>
	<li><a href="{URL}">CATEGORY</a></li>
	<li><a href="{URL}">PAGE</a></li>
	<li><a href="{URL}">SITEMAP</a></li>
</ul>
.fas_menu_globalmenutd{
	margin: 0;
	padding: 0; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	width: 100%;
	border: 1px solid #0046d3;
}
.fas_menu_globalmenutd li{
	list-style: none;
	width: calc(100% / 4);
	border-right: 1px solid #0046d3;
}
.fas_menu_globalmenutd li:last-child{
	border-right: none;
}
.fas_menu_globalmenutd li a{
	text-decoration: none;
	display: inline-block;
	width: 100%;
	line-height: 40px;
	background: #0046d3;
	background: -moz-linear-gradient(top, #0046d3 0%, #4b86fc 100%);
	background: -webkit-linear-gradient(top, #0046d3 0%, #4b86fc 100%);
	background: linear-gradient(to bottom, #0046d3 0%, #4b86fc 100%);
	box-shadow: 1px 1px 1px 0 #4b86fc inset;
	color: #fff;
	text-align: center;
}
.fas_menu_globalmenutd li a: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;
}

立体的なグローバルメニューのサンプルです。各メニューの背景色をグラデーションで表現しており、box-shadow: 〜 inset;で内部的な影を付けることで立体的に見えるようにしています。

両端に配置されたリンク

Prev Next 
<div class="fas_menu_side">
	<a href="{URL}">Prev</a>
	<a href="{URL}">Next</a>
</div>
.fas_menu_side{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: space-between;	
}
.fas_menu_side a{
	text-decoration: none;
	color: #3366cc;
}
.fas_menu_side a:nth-child(1):before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0a8';
	margin-right: 5px;
}
.fas_menu_side a:nth-child(2):after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0a9';
	margin-left: 5px;
}

ページ移動などのリンクで使われる両端に配置されたメニューのサンプルです。リンクを囲っているdivタグをflexボックスにして、justify-content: space-between;で両端に配置しています。

ページ移動メニュー

1 2 3 4 5 
<div class="fas_menu_page">
	<a href="{URL}"></a>
	<a href="{URL}">1</a>
	<a href="{URL}">2</a>
	<span>3</span>
	<a href="{URL}">4</a>
	<a href="{URL}">5</a>
	<a href="{URL}"></a>
</div>
.fas_menu_page{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
}
.fas_menu_page span{
	margin-right: 15px;
	color: #333;
}
.fas_menu_page a{
	text-decoration: none;
	margin-right: 15px;
	color: #3366cc;
}
.fas_menu_page a:last-child{
	margin-right: 0px;
}
.fas_menu_page a:first-child:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f104';
}
.fas_menu_page a:last-child:after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f105';
}

こちらもページ移動に使われるメニューで見るページを選べるリンクサンプルです。flexボックスでリンクを囲み、justify-content: center;で中央に配置しています。リンク同士はmargin-rightで間隔をあけています。また現在見ているページはspanタグで指定してあります。

枠線付きのページ移動メニュー

前へ 1 2 3 4 5 次へ 
<div class="fas_menu_pageborder">
	<a href="{URL}">前へ</a>
	<a href="{URL}">1</a>
	<a href="{URL}">2</a>
	<span>3</span>
	<a href="{URL}">4</a>
	<a href="{URL}">5</a>
	<a href="{URL}">次へ</a>
</div>
.fas_menu_pageborder{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
}
.fas_menu_pageborder span,
.fas_menu_pageborder a{
	text-decoration: none;
	display: inline-block;
	margin-right: 15px;
	padding: 3px 8px;
	min-width: 30px;
	border: 1px solid #3366cc;
	text-align: center;
	color: #3366cc;
}
.fas_menu_pageborder span{
	background: #3366cc;
	color: #fff;
}
.fas_menu_pageborder a:last-child{
	margin-right: 0px;
}
.fas_menu_pageborder a:first-child:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0d9';
	margin-right: 5px;
}
.fas_menu_pageborder a:last-child:after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0da';
	margin-left: 5px;
}

枠線付きのページ移動メニューサンプルです。数字のみだとクリックしにくい場合もありそうですが、余白と枠線を付けることでクリックしやすくなります。aタグに余白を設定してborderで枠線を作っています。

タグメニュー

HTML CSS JavaScript 
<div class="fas_menu_tag">
	<a href="{URL}">HTML</a>
	<a href="{URL}">CSS</a>
	<a href="{URL}">JavaScript</a>
</div>
.fas_menu_tag{
	position: relative;
	margin: 10px 0 0 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	padding: 0 0 0 calc(1em + 10px);
}
.fas_menu_tag:before{
	position: absolute;
	top: 0;
	left: 0;
	line-height: calc(1em + 8px);
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f02b';
	color: #3366cc;
}
.fas_menu_tag a{
	text-decoration: none;
	display: inline-block;
	padding: 3px 8px;
	line-height: 1em;
	margin: 0 10px 10px 0;
	background: #e0ecf9;
	color: #3366cc;
	border: 1px solid #3366cc;
}
.fas_menu_tag a:last-child{
	margin-right: 0px;
}

ブログの記事などでよく使われるタグメニューのサンプルです。flexボックスでリンクを囲んで横並びにし、flex-wrap: wrap;を使うことで折り返しにも対応しています。