FontAwesomeのアイコンを入力してください

Question

私は内部に透明なFontAwesomeからタイムサークルのアイコンを入力しようとしています。

<i class="fa fa-times-circle fa-lg" aria-hidden="true"></i> 

私はこの要素に背景色：白を適用しようとしましたが、要素が二乗しているので、私は二乗背景を持っています。また、丸みを帯びた要素を得るためにborder-radius：100％を適用しようとしましたが、何もしませんでした。

私の質問はこのアイコンの十字を記入する方法ですか？

ありがとうございました。

Answer 1

http://fontawesome.io/examples/#stacked

あなたのアイコンのfa-stackクラスとfa-stack-Nxクラスを使用して、あなたのアイコンをスタック：

.fa-stack .fa-circle{ 
 
    color: fuchsia; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 

 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-circle fa-stack-2x"></i> 
 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
 
</span>

より多くの例を：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square-o fa-stack-2x"></i> 
 
    <i class="fa fa-twitter fa-stack-1x"></i> 
 
</span> 
 
fa-twitter on fa-square-o<br> 
 

 

 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-circle fa-stack-2x"></i> 
 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
 
</span> 
 
fa-flag on fa-circle<br> 
 

 

 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square fa-stack-2x"></i> 
 
    <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> 
 
</span> 
 
fa-terminal on fa-square<br> 
 

 

 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-camera fa-stack-1x"></i> 
 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
 
</span> 
 
fa-ban on fa-camera