は、私が選択し、単純なブートストラップ4に<a href="http://fontawesome.io/icon/angle-down/" rel="nofollow noreferrer">this icon</a>を追加したい

Question

を選択4をブートストラップするフォント恐ろしいアイコンを追加します。だから、ドロップダウンのように見えます。これどうやってするの？

これは、これまでの私のコードです：

.custom-select { 
 
    background-color: #009CFF; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    background-image: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div> 
 
    <select class="custom-select rounded-0 border-0"> 
 
    <option selected>Select</option> 
 
    <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    </select> 
 
</div>

スニペットは、私のエディタがあるとして変化を示すない何らかの理由です。だからここにはcodepenバージョンもあります。誰かが私を助けることができる

.custom-select:after { 
    content: "\f107"; 
    font-family: FontAwesome; 
} 

：とにかく、私はあまりにも、このようにそれを追加しようとしましたが、それは動作していないのですか？ありがとう！

Answer 1

explained hereとして、それはHTMLのselect要素のスタイルを設定することはできませんだし、それは擬似:afterと:beforeを使用することを含みます。