はじめに

CSSで作るアイコンをいい加減に自力で作れる様にしたい！
と思う人は少なからずいらっしゃるのではないでしょうか。

とはいえ、検索エンジンで調べると大体トップで出てくるのが「コピペで簡単！」みたいな謳い文句のサイトですよね。
私自身も日頃お世話になっている身ですので言うのもなんですが、多くのサイトがコピペで完結してしまっていて、具体的にどのプロパティによって形作られているか？の説明が少ないと感じております。

ここから起こりえるのが、「アイコン（コピペで）作れます！仕組みはよくわかってません！」という方、初心者～中級者の人に多いと思います。私も未だにそうなので。
そこでよく見かけるを例を元に順を追ってアイコンのコーディングの仕方を書いていこうと思います。

<div class="link-wrap">
	<a class="link-button" href="">
		<span>詳しくはこちら</span>
	</a>
</div>

.link-wrap {
	margin: 20px;
}

.link-button {
	display: block;
	width: 160px;
	padding: 10px 20px;
	background: #f0dfbc;
	border: 2px solid #4a4b44;
	border-radius: 4px;
	color: #000;
	font-size: 18px;
	text-decoration: none;
}
.link-button:hover {
	background: #766b56;
	color: #fff;
}
.link-button span {
	display: flex;
	align-items: center;
}

まずはベースとなるコードです。
ボタンのテキストの中に疑似要素で白い正方形が置かれている状態から始めます。

以降紹介するコードは、このベースに追記・編集している箇所だけを書いておりますのでご注意ください。

アイコンのコーディングは私の場合はこの様に疑似要素で作るか、もしくはインライン要素のタグを用意して作ることが多いです。
こちらも方法は色々あるかと思いますので、詳細は省きます。

.link-button span::after {
	rotate: 45deg; /* 回転 */
	background: linear-gradient(to top, #185fac, #fff ); /* 視覚的に分かり易くするため */
	border-bottom: none;
	border-left: none;
}

ボタンで一番使用する機会が多いと思われるシンプルな矢印です。
こちらは正方形のborderを使って表現していきます。

余分なborderはそれぞれ個別で指定してあげて削除してます。
初めに「45度」正方形を回転させているので、上下左右のborderの指定がこんがらない様に気を付けてください。
ここでは分かり易い様に背景色をグラデーションにして上下左右を可視化しております。
（実際に使う際はbackgroundの値をnoneまたはbackgroundの記述を削除します）

サイズや太さを変える際はwidthやborderで調整していきます。

このborderのみで表現する矢印に関してはイメージがし易いかと思います。
では、線ではなく中が塗られた様な矢印（三角形）はどうすれば実現できるでしょうか？

.link-button span::after {
	width: 0px;
	height: 0px;
	background: none;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #000;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
}

行がいきなり増えましたが、矢印（三角形）の方法の一つはこちらです。
具体的に何をしているのか？というと、まず要素自体の横幅と高さをなくしてます。
その後に上下左右のborderの境目を利用して三角形を表現しております。
transparent(透明)にしているのは実際にborderを外してしまうと前述の境目が消えてしまうためです。
あくまで透明で目には見えませんが、実際にはそこに存在しているという感じですね。

余談ですが、このtransparentはiPhoneなど一部の端末では「透過された黒色」と判断されてしまうそうで、「透明にしたはずなのに黒い」という現象が起こることもありますのでご注意ください。

ちなみに私がQiitaに初投稿した記事で紹介しておりますので、よろしければご覧ください。

ちなみに最近では以下の記事でも紹介されているプロパティで作るのもあるそうです。
私はあまり使ったことがないのですが、記事の中に三角形のジェネレーターの紹介もありますので参考にしてみてください。

最後に、ここからは少し発展的な例として二重になった矢印の方法も紹介します。
「二重山括弧」とも呼ばれており、テキストでも「≫」の様に打てるのですが、もっとデザイン性のある形にしたい！という時に使えます。

.link-button span {
	position: relative;
}

.link-button span::before {
	content: "";
	position: absolute;
	right: 10px;
    width: 10px;
	height: 10px;
	border: 2px solid #000;
	rotate: 45deg;
	background: none;
	border-bottom: none;
	border-left: none;
}

.link-button span::after {
	position: absolute;
	right: 0;
    width: 10px;
	height: 10px;
	rotate: 45deg;
	background: none;
	border-bottom: none;
	border-left: none;
}

spanタグに疑似要素の「after」に加えて「before」を追加してます。
どちらか1つだけですと矢印が1つ分しか作れないので、1つのタグに対して前後の疑似要素を設定します。
そしてpositionを追加して「absolute」で左側にいる「before」を右側に移動させてます。
（親タグにpositionの「relative」を設定するのを忘れない様に気を付けてください）
これにより二重山括弧の様に矢印が重なっているのを表現できます。
こちらも色や長さはお好みで調整してください。

今回はよく見かける矢印のアイコンを例にして紹介させて頂きました。
あまりにも複雑なデザインでしたらデザイナーさんに画像を制作して頂く必要があるかと思いますが、
簡単なアイコンでしたらエンジニア側で作れる様にしていきたいですね。