Tạo phông chữ Biểu tượng tuyệt vời trong một vòng tròn?

Tôi đang sử dụng font tuyệt vời trên một số dự án nhưng tôi có một số điều tôi muốn làm với các biểu tượng tuyệt vời về phông chữ, tôi có thể dễ dàng gọi một biểu tượng như thế này:

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

Có thể tất cả các biểu tượng luôn ở trong vòng tròn có viền? Một cái gì đó như thế này, tôi có một hình ảnh:

Sử dụng

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

Sẽ làm được hiệu quả, nhưng vấn đề là các biểu tượng luôn lớn hơn mà văn bản hoặc thành phần bên cạnh, có giải pháp nào không?

Với Font Awesome bạn có thể dễ dàng sử dụng các biểu tượng xếp chồng như thế này:

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

tham khảo Phông chữ Biểu tượng xếp chồng tuyệt vời

Cập nhật: - Fiddle cho các biểu tượng xếp chồng

Bạn không cần thủ thuật css hoặc html cho nó. Font Awesome đã tích hợp sẵn lớp cho nó - fa-circle Để xếp chồng nhiều biểu tượng lại với nhau, bạn có thể sử dụng lớp fa-stack trên div cha

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

// Và bây giờ chúng ta có biểu tượng facebook trong vòng tròn :)

Biểu tượng phông chữ trong một vòng tròn bằng cách sử dụng em làm phép đo cơ sở

nếu bạn sử dụng ems cho các phép đo, bao gồm line-height, font-sizevà border-radius, với text-align: centernó làm cho mọi thứ khá vững chắc:

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

Cập nhật: Thay vì sử dụng flex.

Nếu bạn muốn chính xác, đây là cách để đi.

Vĩ cầm. Đi chơi -> http://jsfiddle.net/atilkan/zxjcrhga/

Đây là 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>

Đây là 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;
}

Chúc vui vẻ

Bạn cũng có thể làm điều này. Tôi muốn thêm một vòng tròn xung quanh các biểu tượng icomoon của tôi. Đây là mã.

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

CẬP NHẬT :

Khi học flex gần đây, có một cách sạch hơn (không có bảng và ít css). Đặt trình bao bọc làm display: flex;trung tâm và trẻ em cung cấp cho nó các thuộc tính align-items: center;cho định tâm (dọc) và justify-content: center;(ngang).

Xem Fiddle JS cập nhật này

Kỳ lạ là không ai đề xuất điều này trước đây .. Tôi luôn sử dụng các bảng để làm điều này.
Đơn giản chỉ cần làm cho một trình bao bọc có display: tablevà trung tâm công cụ bên trong nó text-align: centercho ngang và vertical-align: middledọc.

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

và một số người như thế này

.wrapper{
  display: table; 

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

}

hoặc xem Fiddle JS này

Đây là cách tiếp cận bạn không cần sử dụng padding, chỉ cần đặt heightvà widthcho avà flexxử lý 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>

Ví dụ dưới đây không hoạt động với tôi, đây là phiên bản mà tôi đã làm!

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

thử cái này

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

Phông chữ Biểu tượng tuyệt vời được chèn dưới dạng: trước. Vì vậy, bạn có thể tạo kiểu hoặc bạn tôi hay một như vậy:

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

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

Bạn chỉ có thể lấy biểu tượng tròn bằng mã này:

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

Bây giờ CSS của bạn sẽ là:

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

Tôi thích câu trả lời của Dave Everitt với «chiều cao dòng» nhưng nó chỉ hoạt động bằng cách chỉ định «chiều cao» và sau đó chúng ta phải thêm «! Quan trọng» vào chiều cao ...

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

Đây là giải pháp tốt nhất và chính xác nhất mà tôi tìm thấy cho đến nay.

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