CSSを使用して下向きの矢印を作成するには？

Question

白い下向き矢印を、というHTMLコードを使用して作成しようとしました。これは⇩です。
しかし、私はそれを埋めることができず、矢印の上下に多くのスペースがあります。

を使用して同じものを作成するにはどうすればよいですか？

Answer 1

body{font-size:30px;} 
 
i.arrow-down{ 
 
    color: #f0f; 
 
    width: 0.5em; 
 
    height: 0.7em; 
 
    display: inline-block; 
 
    position: relative; 
 
    background: currentColor; 
 
    vertical-align: top; 
 
} i.arrow-down:after{ 
 
    border-right: 0.5em solid transparent; 
 
    border-left: 0.5em solid transparent; 
 
    border-top: 0.4em solid currentColor; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: -0.3em; 
 
    left: -0.22em; 
 
}

Arrow Down <i class="arrow-down"></i>

Answer 2

下矢印↓のためのHTMLコードを↓

Answer 3

である私には多くの作業のように思える、あなたはおそらくアイコンを使用して考えがありますか？次に、サイズを調整したり、色付けしたり、変換するなどの機能を備えています。

http://fontawesome.io/icons/