Buat Font ikon Luar Biasa dalam lingkaran?

Saya menggunakan font yang mengagumkan pada beberapa proyek tetapi saya memiliki beberapa hal yang ingin saya lakukan dengan ikon font yang mengagumkan, saya dapat dengan mudah memanggil ikon seperti ini:

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

Mungkinkah semua ikon selalu melingkar dengan perbatasan? Sesuatu seperti ini, saya punya gambar:

Menggunakan

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

Akan melakukan efeknya, tetapi masalahnya adalah ikon selalu lebih besar daripada teks atau elemen di samping, ada solusi?

Dengan Font Awesome Anda dapat dengan mudah menggunakan ikon bertumpuk seperti ini:

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

lihat Font Awesome Stacked Icons

Pembaruan: - Fiddle untuk ikon bertumpuk

Anda tidak perlu trik css atau html untuk itu. Font Awesome telah dibangun di kelasnya - fa-circle Untuk menumpuk beberapa ikon secara bersamaan, Anda dapat menggunakan kelas fa-stack pada div induk

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

// Dan sekarang kita memiliki ikon facebook di dalam lingkaran :)

Ikon font dalam lingkaran menggunakan emsebagai dasar pengukuran

jika Anda menggunakan ems untuk pengukuran, termasuk line-height, font-sizedan border-radius, dengan text-align: centeritu membuat semuanya menjadi sangat solid:

#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 */
}

Pembaruan: Alih-alih menggunakan flex.

Jika Anda ingin presisi, inilah cara yang harus dilakukan.

Biola. Mainkan -> http://jsfiddle.net/atilkan/zxjcrhga/

Ini HTML-nya

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

Inilah CSS-nya

.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;
}

Selamat bersenang-senang

Anda juga bisa melakukan ini. Saya ingin menambahkan lingkaran di sekitar ikon icomoon saya. Ini kodenya.

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

PEMBARUAN :

Setelah mempelajari flex baru-baru ini, ada cara yang lebih bersih (tidak ada meja dan lebih sedikit css). Atur pembungkus sebagai display: flex;dan untuk memusatkan itu anak-anak memberinya properti align-items: center;untuk justify-content: center;pemusatan (vertikal) dan (horizontal).

Lihat JS Fiddle yang diperbarui ini

Aneh bahwa tidak ada yang menyarankan ini sebelumnya .. Saya selalu menggunakan tabel untuk melakukan ini.
Cukup buat pembungkus memiliki display: tabledan pusatkan barang-barang di dalamnya dengan text-align: centeruntuk vertical-align: middlepenyelarasan horizontal dan vertikal.

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

dan beberapa merendahkan seperti ini

.wrapper{
  display: table; 

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

}

atau lihat JS Fiddle ini

Ini adalah pendekatan yang tidak perlu Anda gunakan padding, cukup atur heightdan widthuntuk adan biarkan flexpegangan dengan margin: 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>

Contoh di bawah ini tidak berhasil bagi saya, ini adalah versi yang saya buat berhasil!

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

coba ini

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

Ikon Huruf Luar Biasa dimasukkan sebagai: sebelumnya. Oleh karena itu Anda dapat gaya baik Anda i atau a seperti:

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

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

Anda bisa mendapatkan ikon bulat menggunakan kode ini:

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

Sekarang CSS Anda adalah:

.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;}

Saya suka jawaban Dave Everitt dengan «line-height» tetapi itu hanya bekerja dengan menentukan «height» dan kemudian kita harus menambahkan «! Penting» ke ketinggian garis ...

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

Ini adalah solusi terbaik dan paling tepat yang saya temukan sejauh ini.

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