FontAwesome Sample

リンク

リンクのコピペで使えるFontAwesomeサンプル集です。アイコンを使ったリンクを用いることで注目してもらいたいリンクをより目立たせることができクリック率上昇などに期待ができます。このページでは基本的に単体でのリンクのサンプルになりますので、複数のリンクのサンプルをご覧になりたい場合は、メニューをご覧ください。

Link
<a href="{URL}" class="fas_link_before">Link</a>
.fas_link_before{
	text-decoration: none;
	color: #3366cc;
}
.fas_link_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: '\f35a';
	margin-right: 5px;
}

前にアイコンが付いたリンクのサンプルです。シンプルなデザインなので嫌味がなく使いやすいと思います。アイコンは擬似要素で設定しており、margin-rightでアイコンと文字の間隔をあけています。

サイトを開く
<a href="{URL}" target="_blank" class="fas_link_anothertab">サイトを開く</a>
.fas_link_anothertab{
	text-decoration: none;
	color: #3366cc;
}
.fas_link_anothertab:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f24d';
	margin-right: 5px;
}

別タブで開くリンクのサンプルです。デザイン設定は前にアイコンが付いたリンクとほぼ同じですが、HTMLにtarget="_blank"を付けることで別タブで開くリンクにしています。

Next
<a href="{URL}" class="fas_link_after">Next</a>
.fas_link_after{
	text-decoration: none;
	color: #3366cc;
}
.fas_link_after:after{
	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-left: 5px;
}

後ろにアイコンが表示されるリンクのサンプルです。アイコンは擬似要素の:afterで設定をしており、margin-leftで文字とアイコンとの間隔を指定しています。

Follow
<a href="{URL}" class="fas_link_side">Follow</a>
.fas_link_side{
	text-decoration: none;
	color: #3366cc;
}
.fas_link_side:before,.fas_link_side:after{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
}
.fas_link_side:before{
	content: '\f101';
	margin-right: 5px;
}
.fas_link_side:after{
	content: '\f100';
	margin-left: 5px;
}

アイコンが前後にあるリンクのサンプルです。擬似要素の:beforeと:afterで前と後ろのアイコン設定をおこなっています。前と後ろを同じアイコンに設定することもできます。

MENU
<a href="{URL}" class="fas_link_top">MENU</a>
.fas_link_top{
	display: inline-block;
	text-decoration: none;
	text-align: center;	
	font-size: 0.8em;
	color: #3366cc;
}
.fas_link_top:before{
	display: block;
	font-size: 2.4em;
	line-height: 1em;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0c9';
}

アイコンが上にあり文字が下にくるリンクのサンプルです。アイコンをdisplay: block;でブロック要素にすることによって文字が下にくるように設定しています。

User
<a href="{URL}" class="fas_link_borderbottom">User</a>
.fas_link_borderbottom{
	text-decoration: none;
	border-bottom: 1px solid #3366cc;
	color: #3366cc;
}
.fas_link_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: '\f1fa';
	margin-right: 5px;
}

下線付きのリンクサンプルです。通常、リンクの下線はtext-decorationを使いますが、アイコンを使うと線が途切れてしまうためborder-bottomで下線の設定をおこなっています。

Bookmark
<a href="{URL}" class="fas_link_border">Bookmark</a>
.fas_link_border{
	text-decoration: none;
	display: inline-block;
	line-height: 1;
	padding: 5px 8px;
	border: 1px solid #3366cc;
	color: #3366cc;
}
.fas_link_border: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;
}

枠線付きのリンクサンプルです。リンクをdisplay: inline-block;でインラインブロック要素にし、borderで枠線をつけています。またpaddingで余白を調節しています。

Home
<a href="{URL}" class="fas_link_back">Home</a>
.fas_link_back{
	text-decoration: none;
	display: inline-block;
	line-height: 1;
	padding: 5px 8px;
	background: #e0ecf9;
	color: #3366cc;
}
.fas_link_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: '\f015';
	margin-right: 5px;
}

背景色が付いたリンクのサンプルです。リンクをインラインブロック要素にし、backgroundで背景色を設定しています。余白はpaddingで調節しています。

お問い合わせ
<a href="{URL}" class="fas_link_backborder">お問い合わせ</a>
.fas_link_backborder{
	text-decoration: none;
	display: inline-block;
	line-height: 1;
	padding: 5px 8px;
	border: 1px solid #3366cc;
	background: #e0ecf9;
	color: #3366cc;
}
.fas_link_backborder:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f0e0';
	margin-right: 5px;
}

背景色と枠線を付けたリンクのサンプルです。backgroundで背景色、borderで枠線の設定をおこなっています。

RSS
<a href="{URL}" class="fas_link_backborderradius">RSS</a>
.fas_link_backborderradius{
	text-decoration: none;
	display: inline-block;
	line-height: 1;
	padding: 5px 8px;
	border: 1px solid #3366cc;
	background: #e0ecf9;
	color: #3366cc;
	border-radius: 5px;
}
.fas_link_backborderradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f09e';
	margin-right: 5px;
}

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

<a href="{URL}" class="fas_link_icon"></a>
.fas_link_icon{
	text-decoration: none;
	color: #3366cc;
}
.fas_link_icon:before{
	display: inline-block;
	font-size: 1.4em;
	line-height: 1em;
	width: 1em;
	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: '\f0c9';
}

ヘッダーのメニューなどで使うアイコンのみのリンクサンプルです。リンクタグの文字は設定せず、アイコンを擬似要素の:beforeで設定しています。

<a href="{URL}" class="fas_link_iconsquare"></a>
.fas_link_iconsquare{
	text-decoration: none;
}
.fas_link_iconsquare:before{
	display: inline-block;
	font-size: 1.4em;
	line-height: 1.6em;
	width: 1.6em;
	text-align: center;
	background: #3366cc;
	color: #fff;
	border-radius: 5px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f013';
}

こちらもアイコンのみで角丸の背景が設定されたリンクのサンプルです。アイコンをインラインブロック要素にして、backgroundで背景色を設定して、border-radiusで角丸を設定しています。

<a href="{URL}" class="fas_link_iconcircle"></a>
.fas_link_iconcircle{
	text-decoration: none;
}
.fas_link_iconcircle:before{
	display: inline-block;
	font-size: 30px;
	line-height: 40px;
	width: 40px;
	text-align: center;
	background: #3366cc;
	color: #fff;
	border-radius: 20px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f106';
}

円の中にアイコンのみが表示されるリンクのサンプルです。line-heightで高さ・widthで横幅を指定して、border-radiusで高さや横幅の半分の円の角丸にすることで円を作っています。

購入する
<a href="{URL}" class="fas_link_button">購入する</a>
.fas_link_button{
	text-decoration: none;
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	background: #3366cc;
	color: #fff;
}
.fas_link_button:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f290';
	margin-right: 5px;
}

フラットなボタン風のリンクサンプルです。aタグをインラインブロック要素にして高さを固定しています。

Mail
<a href="{URL}" class="fas_link_buttonradius">Mail</a>
.fas_link_buttonradius{
	text-decoration: none;
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	background: #3366cc;
	color: #fff;
	border-radius: 5px;
}
.fas_link_buttonradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0e0';
	margin-right: 5px;
}

角丸が付いたボタン風のリンクサンプルです。border-radiusで角丸の設定をおこなっています。

Download
<a href="{URL}" class="fas_link_buttonround">Download</a>
.fas_link_buttonround{
	text-decoration: none;
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	background: #3366cc;
	color: #fff;
	border-radius: 20px;
}
.fas_link_buttonround:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56d';
	margin-right: 5px;
}

両端が丸いボタン風のリンクサンプルです。border-radiusで高さの半分の角丸を入れることで両端を丸く表現しています。

Upload
<a href="{URL}" class="fas_link_buttonborder">Upload</a>
.fas_link_buttonborder{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #fff;
	color: #3366cc;
	border: 2px solid #3366cc;
}
.fas_link_buttonborder:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f574';
	margin-right: 5px;
}

枠線のみのボタン風リンクサンプルです。borderで枠線の設定をおこなっています。heightで高さを指定して、line-heightに枠線分の高さを引いた値を設定することで上下中央に文字が配置されるようにしています。

Import
<a href="{URL}" class="fas_link_buttonborderradius">Import</a>
.fas_link_buttonborderradius{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #fff;
	color: #3366cc;
	border: 2px solid #3366cc;
	border-radius: 5px;
}
.fas_link_buttonborderradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56f';
	margin-right: 5px;
}

枠線＋角丸のボタン風リンクサンプルです。borderで枠線、border-radiusで角丸の設定をおこなっています。

Export
<a href="{URL}" class="fas_link_buttonborderround">Export</a>
.fas_link_buttonborderround{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #fff;
	color: #3366cc;
	border: 2px solid #3366cc;
	border-radius: 20px;
}
.fas_link_buttonborderround:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56e';
	margin-right: 5px;
}

枠線＋両端が丸いボタン風のリンクサンプルです。border-radiusで高さの半分の角丸を指定することで両端が丸くなるように設定をおこなっています。

Good
<a href="{URL}" class="fas_link_buttonborderback">Good</a>
.fas_link_buttonborderback{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #e0ecf9;
	color: #3366cc;
	border: 2px solid #3366cc;
}
.fas_link_buttonborderback:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f164';
	margin-right: 5px;
}

枠線＋背景のボタン風リンクサンプルです。backgroundで背景、borderで枠線の設定をおこなっています。

Login
<a href="{URL}" class="fas_link_buttonborderbackradius">Login</a>
.fas_link_buttonborderbackradius{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #e0ecf9;
	color: #3366cc;
	border: 2px solid #3366cc;
	border-radius: 5px;
}
.fas_link_buttonborderbackradius:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f2f6';
	margin-right: 5px;
}

枠線＋背景＋角丸のボタン風リンクサンプルです。border-radiusで角丸の設定をおこなっています。

Logout
<a href="{URL}" class="fas_link_buttonborderbackround">Login</a>
.fas_link_buttonborderbackround{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #e0ecf9;
	color: #3366cc;
	border: 2px solid #3366cc;
	border-radius: 20px;
}
.fas_link_buttonborderbackround:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f2f5';
	margin-right: 5px;
}

枠線＋背景＋両端が丸いボタン風のリンクサンプルです。border-radiusで高さの半分の角丸を入れることで両端を丸くしています。

Create
<a href="{URL}" class="fas_link_buttongradationhorizon">Create</a>
.fas_link_buttongradationhorizon{
	text-decoration: none;
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	background: #2ac9f9;
	background: -moz-linear-gradient(left, #2ac9f9 0%, #405fed 100%);
	background: -webkit-linear-gradient(left, #2ac9f9 0%, #405fed 100%);
	background: linear-gradient(to right, #2ac9f9 0%, #405fed 100%);
	color: #fff;
	border-radius: 5px;
}
.fas_link_buttongradationhorizon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f044';
	margin-right: 5px;
}

背景が横グラデーションになっているボタン風のリンクサンプルです。linear-gradientでグラデーションの設定をおこなっています。

Copy
<a href="{URL}" class="fas_link_buttongradationvertical">Copy</a>
.fas_link_buttongradationvertical{
	text-decoration: none;
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	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;
	border-radius: 5px;
}
.fas_link_buttongradationvertical:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0c5';
	margin-right: 5px;
}

背景が縦グラデーションになっているボタン風のリンクサンプルです。linear-gradientでto bottomを指定することで縦にグラデーションする設定をおこなっています。

Delete
<a href="{URL}" class="fas_link_buttongradationdiagonal">Delete</a>
.fas_link_buttongradationdiagonal{
	text-decoration: none;
	display: inline-block;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	background: #2ac9f9;
	background: -moz-linear-gradient(-45deg, #2ac9f9 0%, #405fed 100%);
	background: -webkit-linear-gradient(-45deg, #2ac9f9 0%, #405fed 100%);
	background: linear-gradient(135deg, #2ac9f9 0%, #405fed 100%);
	color: #fff;
	border-radius: 5px;
}
.fas_link_buttongradationdiagonal:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f2ed';
	margin-right: 5px;
}

背景が斜めグラデーションになっているボタン風のリンクサンプルです。linear-gradientで135degを指定することで135度の角度でグラデーションする設定をおこなっています。お好みで角度を変更してお使いください。

Search
<a href="{URL}" class="fas_link_buttonshadowinset">Search</a>
.fas_link_buttonshadowinset{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 38px;
	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%);
	color: #fff;
	border-radius: 5px;
	border: 1px solid #0046d3;
	box-shadow: 2px 2px 2px 0 #4b86fc inset;
}
.fas_link_buttonshadowinset:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f002';
	margin-right: 5px;
}

枠線＋グラデーション＋内部の影が付いたボタン風のリンクサンプルです。box-shadow:〜 inset;で内部に影ができるように設定することで少し立体感が出るようにしています。

Save
<a href="{URL}" class="fas_link_buttonshadowinout">Save</a>
.fas_link_buttonshadowinout{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 38px;
	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%);
	color: #fff;
	border-radius: 5px;
	border: 1px solid #0046d3;
	box-shadow: 2px 2px 2px 0 #4b86fc inset, 0 3px 0 0 #0046d3;
}
.fas_link_buttonshadowinout:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0c7';
	margin-right: 5px;
}

枠線＋グラデーション＋内部＆外部の影が付いたボタン風のリンクサンプルです。box-shadowで内部と外部の影ができるように設定しています。