divタグでFont Awesomeアイコンを使用できないのはなぜですか？

Question

私は自分が作ったカードの中にフォント・アウェソム・アイコンを使用しようとしていました。残念ながら、彼らは単に私のカードのdiv内のどこにも表示されません。私はそれがこれとは何かを持っていると思っています。これは、.cardクラス:beforeセレクタがそれなしで動作すると考えているセレクタです。

どのようにデザインを変更せずにカードにアイコンを付けることができますか？

.card :before { 
-webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    background-color: #eee; 
    box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16); 
    border-radius: 30px; 
    font-size: 22px; 
    font-style: normal; 
    left: 50%; 
    line-height: 60px; 
    position: absolute; 
    top: -30px; 
    width: 60px; 
    color: #3498db; 
    content: "AA"; 
    font-family: 'Roboto', sans-serif; 
} 

はここCodepen

Answer 1

サイードRafeeqが言ったように。あなたは、ある代わりにfa-userクラスのユーザーアイコンのcodeに使用することができます

例：Codepen

Answer 2

のマイナーな変更を行ってください前とクラスの間のスペースを削除します。 font-familyおよびcontentプロパティ

.card:before { 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    background-color: #eee; 
    box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16); 
    border-radius: 30px; 
    font-size: 22px; 
    font-style: normal; 
    left: 50%; 
    line-height: 60px; 
    position: absolute; 
    top: -30px; 
    width: 60px; 
    color: #3498db; 
    content:"\f033" 
    font-family: 'FontAwesome; 
} 

Answer 3

アイコンユニコードを使用する必要があります。
チェックこのlinkとCSSコード：

.card:before { 
    content: '\f105'; 
    font-family: 'FontAwesome'; 
    font-size: 14px; 
}