アイコンを文字コードで使用する方法です。
メリットは、色や大きさをCSSで変更できる点です。また文字なので、大きくしてもアイコンの画像は荒れません。
参考サイト：http://fontawesome.io/icons/
【１】以下のGithubよりセットをダウンロードしてください。
https://gitlab.com/accorder/accorder_library/tree/master/07.%20html_css/%E6%96%87%E5%AD%97%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86
セット内容の
/fonts フォルダ以下
/css/font-awesome.min.css をサイトにコピー
【２】<head>に追加する項目
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all"> <!--フォントアイコン使う-->
【３】<body>に追加する項目
classのfa の後ろに入れたいアイコンの名前を入れる。（サイトに一覧が載っています。）
<i class="fa fa-angle-down" aria-hidden="true"></i>
【４】cssファイルで以下の様に i 要素を変更する。色や大きさ等を設定できる
.products_list li i { display:block; font-size:26px; color:#fff; }