SNS

SNSのコピペで使えるFontAwesomeサンプル集です。ページをSNSやブックマークで共有するときに便利なSNSリンクのサンプルデザインです。FontAwesomeで用意されているSNSアイコンを使って作成しています。はてなブックマークはFontAwesomeでアイコンが用意されていない為、を使用しています。

アイコンのみ

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_icon">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_icon{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_icon li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_sns_icon li:last-child{
	margin: 0 0 0 0;
}
.fas_sns_icon li a{
	text-decoration: none;
	display: inline-block;
}
.fas_sns_icon li a i{
	display: inline-block;
	width: 30px;
	height: 30px;	
	color: #333;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}

アイコンのみを横並びにしたSNSリンクのサンプルです。リンクをリストにしてulタグをdisplay: flex;にすることで横並びのリンクになるようにしています。

アイコンのみ（色）

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_iconcolor">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_iconcolor{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_iconcolor li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_sns_iconcolor li:last-child{
	margin: 0 0 0 0;
}
.fas_sns_iconcolor li a{
	text-decoration: none;
	display: inline-block;
}
.fas_sns_iconcolor li a i{
	display: inline-block;
	width: 30px;
	height: 30px;	
	color: #333;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}
.fas_sns_iconcolor li a i.fa-twitter{ color: #66ccff; }
.fas_sns_iconcolor li a i.fa-facebook-square{ color: #3366cc; }
.fas_sns_iconcolor li a i.fa-line{ color: #33cc33; }
.fas_sns_iconcolor li a i.fa-question-circle{ color: #3399cc; }
.fas_sns_iconcolor li a i.fa-get-pocket{ color: #ff0000; }
.fas_sns_iconcolor li a i.fa-rss-square{ color: #ff9900; }

アイコンのみのSNSリンクに色を付けたサンプルです。各リンクをli a i.{クラス}で指定してアイコン色を設定しています。

枠付きアイコン

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_frame">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_frame{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_frame li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_sns_frame li a{
	text-decoration: none;
	display: inline-block;
	background: #333;
	border-radius: 5px;
}
.fas_sns_frame li a i{
	display: inline-block;
	width: 40px;
	height: 40px;	
	color: #fff;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}

角丸の枠を付けたSNSリンクのサンプルです。各リンクをdisplay: inline-block;でインラインブロック化して背景を設定しています。

枠付きアイコン（色）

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_framecolor">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_framecolor{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_framecolor li{
	list-style: none;
	margin: 0 10px 0 0;
}
.fas_sns_framecolor li a{
	text-decoration: none;
	display: inline-block;
	background: #333;
	border-radius: 5px;
}
.fas_sns_framecolor li a i{
	display: inline-block;
	width: 40px;
	height: 40px;	
	color: #fff;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}
.fas_sns_framecolor li:nth-child(1) a{ background: #66ccff; }
.fas_sns_framecolor li:nth-child(2) a{ background: #3366cc; }
.fas_sns_framecolor li:nth-child(3) a{ background: #33cc33; }
.fas_sns_framecolor li:nth-child(4) a{ background: #3399cc; }
.fas_sns_framecolor li:nth-child(5) a{ background: #ff0000; }
.fas_sns_framecolor li:nth-child(6) a{ background: #ff9900; }

角丸の枠に色を付けたSNSリンクのサンプルです。li:nth-child(〜) aで前から順番に枠の背景色を指定しています。

丸枠付きアイコン

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_circle">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_circle{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_circle li{
	list-style: none;
	margin: 0 5px 0 0;
}
.fas_sns_circle li a{
	text-decoration: none;
	display: inline-block;
	background: #333;
	border-radius: 25px;
}
.fas_sns_circle li a i{
	display: inline-block;
	width: 50px;
	height: 50px;	
	color: #fff;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}

丸枠付きのSNSリンクサンプルです。リンクタグに背景色を付けborder-radiusで丸くなるように指定しています。iタグは高さと横幅を固定化しています。

丸枠付きアイコン（色）

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_circlecolor">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_circlecolor{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}
.fas_sns_circlecolor li{
	list-style: none;
	margin: 0 5px 0 0;
}
.fas_sns_circlecolor li a{
	text-decoration: none;
	display: inline-block;
	background: #333;
	border-radius: 25px;
}
.fas_sns_circlecolor li a i{
	display: inline-block;
	width: 50px;
	height: 50px;	
	color: #fff;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}
.fas_sns_circlecolor li:nth-child(1) a{ background: #66ccff; }
.fas_sns_circlecolor li:nth-child(2) a{ background: #3366cc; }
.fas_sns_circlecolor li:nth-child(3) a{ background: #33cc33; }
.fas_sns_circlecolor li:nth-child(4) a{ background: #3399cc; }
.fas_sns_circlecolor li:nth-child(5) a{ background: #ff0000; }
.fas_sns_circlecolor li:nth-child(6) a{ background: #ff9900; }

丸枠に背景色を付けたSNSリンクのサンプルです。li:nth-child(〜) aで前から順番に丸枠の背景色を指定しています。

横幅に対して均等な幅のボタン

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_equality">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_equality{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: space-between;
}
.fas_sns_equality li{
	list-style: none;
	display: inline-block;
	width: calc((100% / 6) - 5px);
}
.fas_sns_equality li a{
	text-decoration: none;
	display: block;
	background: #333;
}
.fas_sns_equality li a i{
	display: inline-block;
	width: 100%;
	height: 40px;	
	color: #fff;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}

横幅に対して均等な幅のSNSリンクサンプルです。ulタグにdisplay: flex;を指定し、リストタグの幅をリンクの個数で分割した長さにすることで均等な幅のリンクを作成しています。

横幅に対して均等な幅のボタン（色）

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_equalitycolor">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i></a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i></a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i></a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i></a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i></a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS
COPY

.fas_sns_equalitycolor{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: space-between;
}
.fas_sns_equalitycolor li{
	list-style: none;
	display: inline-block;
	width: calc((100% / 6) - 5px);
}
.fas_sns_equalitycolor li a{
	text-decoration: none;
	display: block;
	background: #333;
}
.fas_sns_equalitycolor li a i{
	display: inline-block;
	width: 100%;
	height: 40px;	
	color: #fff;
	font-size: 30px;
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;
	align-items: center;	
}
.fas_sns_equalitycolor li:nth-child(1) a{ background: #66ccff; }
.fas_sns_equalitycolor li:nth-child(2) a{ background: #3366cc; }
.fas_sns_equalitycolor li:nth-child(3) a{ background: #33cc33; }
.fas_sns_equalitycolor li:nth-child(4) a{ background: #3399cc; }
.fas_sns_equalitycolor li:nth-child(5) a{ background: #ff0000; }
.fas_sns_equalitycolor li:nth-child(6) a{ background: #ff9900; }

均等な幅のSNSリンクに背景色を付けたサンプルです。li:nth-child(〜) aで前から順番に背景色を指定しています。

アイコンの下にテキスト

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_icontop">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i>Twitter</a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i>Facebook</a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i>LINE</a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i>Hatena</a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i>Pocket</a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i>RSS</a></li>
</ul>

CSS
COPY

.fas_sns_icontop{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: space-between;
}
.fas_sns_icontop li{
	list-style: none;
	width: calc(100% / 6);
	text-align: center;
}
.fas_sns_icontop li a{
	text-decoration: none;
	display: inline-block;
	font-size: 0.8em;
	line-height: 1.4;
	color: #333;
}
.fas_sns_icontop li a i{
	display: block;
	font-size: 3em;
	line-height: 1;
	margin-bottom: 2px;
}

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

アイコンの下にテキスト（色）

SAMPLE
CODE

HTML
COPY

<ul class="fas_sns_icontopcolor">
	<li><a href="https://twitter.com/intent/tweet?text={ページタイトル}&url={URL}" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i>Twitter</a></li>
	<li><a href="http://www.facebook.com/share.php?u={URL}" target="_blank" rel="nofollow"><i class="fab fa-facebook-square"></i>Facebook</a></li>
	<li><a href="http://line.me/R/msg/text/?{URL}" target="_blank" rel="nofollow"><i class="fab fa-line"></i>LINE</a></li>
	<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fas fa-question-circle"></i>Hatena</a></li>
	<li><a href="http://getpocket.com/edit?url={URL}&title={ページタイトル}" target="_blank" rel="nofollow"><i class="fab fa-get-pocket"></i>Pocket</a></li>
	<li><a href="{RSSのURL}" target="_blank" rel="nofollow"><i class="fas fa-rss-square"></i>RSS</a></li>
</ul>

CSS
COPY

.fas_sns_icontopcolor{
	margin: 0;
	padding: 0; 
	display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: space-between;
}
.fas_sns_icontopcolor li{
	list-style: none;
	width: calc(100% / 6);
	text-align: center;
}
.fas_sns_icontopcolor li a{
	text-decoration: none;
	display: inline-block;
	font-size: 0.8em;
	line-height: 1.4;
	color: #333;
}
.fas_sns_icontopcolor li a i{
	display: block;
	font-size: 3em;
	line-height: 1;
	margin-bottom: 2px;
}
.fas_sns_icontopcolor li:nth-child(1) a{ color: #66ccff; }
.fas_sns_icontopcolor li:nth-child(2) a{ color: #3366cc; }
.fas_sns_icontopcolor li:nth-child(3) a{ color: #33cc33; }
.fas_sns_icontopcolor li:nth-child(4) a{ color: #3399cc; }
.fas_sns_icontopcolor li:nth-child(5) a{ color: #ff0000; }
.fas_sns_icontopcolor li:nth-child(6) a{ color: #ff9900; }

アイコンの下の文字が付くSNSリンクの色を付けたサンプルです。色はli:nth-child(〜) aで前から順番に指定しています。