Bir daire içinde Font Awesome simgeleri yapmak mı?

Bazı projelerde harika yazı tipi kullanıyorum ama yazı tipi harika simgeleriyle yapmak istediğim bazı şeyler var, kolayca böyle bir simge diyebilirim:

<i class="fa fa-lock"></i>

Tüm simgelerin her zaman kenarlıklı yuvarlak daire içinde olması mümkün mü? Bunun gibi bir şey, bir resmim var:

kullanma

i {
  background-color: white;
  border-radius: 50%;
  border: 1x solid grey;
  padding: 10px;
}

Etkisi olacak, ancak sorun şu ki, simgeler her zaman yanındaki metin veya öğeden daha büyük, herhangi bir çözüm?

Font Awesome ile aşağıdaki gibi yığılmış simgeleri kolayca kullanabilirsiniz:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

Font Awesome Yığılmış Simgelerine bakın

Güncelleme: - Yığılmış simgeler için Keman

Bunun için css veya html hilelerine ihtiyacınız yok. Font Awesome, bunun için sınıfta yerleşiktir - fa-circle Birden çok simgeyi bir araya yığmak için, üst div'de fa-stack sınıfını kullanabilirsiniz.

<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> 

// Ve şimdi çemberin içinde facebook simgesi var :)

emTemel ölçü olarak kullanılan daire içindeki yazı tipi simgesi

Eğer dahil ölçümler için ems kullanırsanız line-height, font-sizeve border-radiusbirlikte, text-align: centerbu işler çok katı yapar:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Güncelleme: Bunun yerine flex'i kullanın.

Hassasiyet istiyorsanız, gitmenin yolu budur.

Vaktini boşa harcamak. Oynamaya Git -> http://jsfiddle.net/atilkan/zxjcrhga/

İşte HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

İşte CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

İyi eğlenceler

Bunu da yapabilirsiniz. İcomoon simgelerimin etrafına bir daire eklemek istedim. İşte kod.

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

GÜNCELLEME :

Son zamanlarda flex'i öğrendikten sonra, daha temiz bir yol var (tablo yok ve daha az css). Sarmalayıcıyı, altlarını display: flex;ortalayacak şekilde ayarlayın ve ona align-items: center;(dikey) ve justify-content: center;(yatay) merkezleme özelliklerini verin.

Bu güncellenmiş JS Fiddle'a bakın

Daha önce kimsenin bunu önermemesi garip .. Bunu yapmak için her zaman tabloları kullanırım. Yatay ve dikey hizalama
için bir sargının içinde display: tableve ortada bir şeyler olması yeterlidir .text-align: centervertical-align: middle

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

ve bunun gibi biraz şımarık

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

veya bu JS Fiddle'a bakın

Kullanmanız gerekmeyen yaklaşım budur padding, sadece heightvewidth için başa açıkmasına izin verin .flexmargin: 0 auto

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

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

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Aşağıdaki örnek benim için pek işe yaramadı, işte yaptığım sürüm bu!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

CSS:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

bunu dene

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Font Awesome simgeleri a: olarak eklenir. Bu nedenle, ya i ya da benzerlerini biçimlendirebilirsiniz:

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Bu kodu kullanarak basitçe yuvarlak simge elde edebilirsiniz:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

Şimdi CSS'niz şöyle olacak:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

Dave Everitt'in "satır yüksekliği" cevabını beğendim, ancak yalnızca "yükseklik" belirleyerek işe yarıyor ve sonra satır yüksekliğine "! Önemli" eklememiz gerekiyor ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Bu şimdiye kadar bulduğum en iyi ve en kesin çözüm.

CSS:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }