FAアイコンの周りに円を作成し、私は私のFAアイコンの周りに円を作成しようとしています

Question

こんにちはみんな、この例：私はサークルの境界線から離れて、すべてを行っていると私は見当がつかない

この効果は、仕事を得るためにどのように、私はこれまでのところ、これを持っている：

HTML：

<div class="row icon-set"> 
    <div class="col-md-3 text-center"> 
     <p> 
      <i class="fa fa-lightbulb-o"></i> 
     </p> 
     <p class="title"><span class="underline-text">Awesome</span> 
     </p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
</div> 

CSS：

私は仕事に行くカント

.parrlex1 .underline-text { 
    border-color: rgba(239,239,239,.5); 
    border-bottom-style: solid; 
    display: inline-block; 
    border-bottom-width: 3px; 
    padding-bottom: 7px; 
} 

.parrlex1 .title { 
    color: #ccb08a; 
    margin-top: 28px; 
    margin-bottom: 10px; 
     letter-spacing: 2px; 
     text-align: center; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

.icon-set .fa-lightbulb-o { 
    font-size: 40px; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
} 

部分だけは助け

Answer 1

アイコン自体よりも、親コンテナのスタイルを、おそらく良いです（アイコン、コンテナクラスを参照してください）。親コンテナに幅、高さ、およびボーダ半径を移動してから、翻訳を使用してサークル内のアイコンを中央に配置しました。お役に立てれば！

.underline-text { 
 
    border-color: rgba(239, 239, 239, .5); 
 
    border-bottom-style: solid; 
 
    display: inline-block; 
 
    border-bottom-width: 3px; 
 
    padding-bottom: 7px; 
 
} 
 

 
.title { 
 
    color: #ccb08a; 
 
    margin-top: 28px; 
 
    margin-bottom: 10px; 
 
    letter-spacing: 2px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
} 
 

 
.icon-container { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid red; 
 
    border-radius: 50%; 
 
    margin: auto; 
 
} 
 

 
.icon-set .fa-lightbulb-o { 
 
    font-size: 40px; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
 
<div class="row icon-set"> 
 
    <div class="col-md-3 text-center"> 
 
    <p class="icon-container"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </p> 
 
    <p class="title"><span class="underline-text">Awesome</span> 
 
    </p> 
 
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
    </div> 
 
</div>

Answer 2

あなたのコンテナの周りcircleのクラスを追加するアイコンの周りの半径は

おかげで、CSSは以下のことが実証されています。ホープ、このことができます:)

.parrlex1 .underline-text { 
 
    border-color: rgba(239, 239, 239, .5); 
 
    border-bottom-style: solid; 
 
    display: inline-block; 
 
    border-bottom-width: 3px; 
 
    padding-bottom: 7px; 
 
} 
 

 
.parrlex1 .title { 
 
    color: #ccb08a; 
 
    margin-top: 28px; 
 
    margin-bottom: 10px; 
 
    letter-spacing: 2px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
} 
 

 
.circle { 
 
    display: block; 
 
    height: 100px; 
 
    width: 100px; 
 
    line-height: 100px; 
 
    border-radius: 50%; 
 
    border:1px solid gold; 
 
    background-color: rgba(10,10,10,0.8); 
 
    color: gold; 
 
    text-align: center; 
 
    font-size: 2em; 
 
} 
 

 
.icon-set .fa-lightbulb-o { 
 
    font-size: 40px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="row icon-set"> 
 
    <div class="col-md-3 text-center"> 
 
    <p class="circle"> 
 
     <i class="fa fa-lightbulb-o"></i> 
 
    </p> 
 
    <p class="title"><span class="underline-text">Awesome</span> 
 
    </p> 
 
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
 
    </div> 
 
</div>