สร้างไอคอน Font Awesome เป็นวงกลม?

ฉันใช้ฟอนต์ที่ยอดเยี่ยมในบางโปรเจ็กต์ แต่ฉันมีบางอย่างที่อยากทำกับฟอนต์ไอคอนน่ากลัวฉันสามารถเรียกไอคอนแบบนี้ได้อย่างง่ายดาย:

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

เป็นไปได้ไหมที่ไอคอนทั้งหมดจะอยู่ในวงกลมกลมที่มีเส้นขอบ? สิ่งนี้ฉันมีภาพ:

การใช้

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

จะทำเอฟเฟกต์ แต่ปัญหาคือไอคอนมักจะใหญ่กว่าที่ข้อความหรือองค์ประกอบข้างๆมีวิธีแก้ไขอย่างไร?

ด้วย Font Awesome คุณสามารถใช้ไอคอนแบบเรียงซ้อนเช่นนี้:

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

อัปเดต: - Fiddle สำหรับไอคอนแบบเรียงซ้อน

คุณไม่จำเป็นต้องมีเทคนิค css หรือ html สำหรับมัน Font Awesome ได้สร้างขึ้นในคลาสสำหรับมัน - fa-circleในการซ้อนไอคอนหลายไอคอนเข้าด้วยกันคุณสามารถใช้คลาส fa-stack บน div หลัก

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

// ตอนนี้เรามีไอคอน facebook อยู่ในวงกลม :)

ไอคอนแบบอักษรในวงกลมโดยใช้ emเป็นการวัดพื้นฐาน

ถ้าคุณใช้ระบบการจัดการสิ่งแวดล้อมสำหรับการตรวจวัดรวมทั้งline-height, font-sizeและborder-radiusด้วยtext-align: centerก็จะทำให้สิ่งที่เป็นของแข็งสวย:

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

อัปเดต:ค่อนข้างใช้ flex

หากคุณต้องการความแม่นยำนี่คือวิธีที่จะไป

ซอ. ไปเล่น -> http://jsfiddle.net/atilkan/zxjcrhga/

นี่คือ 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>

นี่คือ 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;
}

มีความสุข

คุณยังสามารถทำได้ ฉันต้องการเพิ่มวงกลมรอบ ๆ ไอคอน icomoon ของฉัน นี่คือรหัส

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

อัพเดท :

เมื่อเรียนรู้การดิ้นเมื่อเร็ว ๆ นี้มีวิธีที่สะอาดกว่า (ไม่มีตารางและ css น้อยกว่า) ตั้งกระดาษห่อเป็นdisplay: flex;และจัดกึ่งกลางเด็กให้คุณสมบัติalign-items: center;สำหรับ (แนวตั้ง) และjustify-content: center;(แนวนอน) อยู่ตรงกลาง

ดูJS Fiddle ที่อัปเดตนี้

แปลกที่ไม่มีใครแนะนำเรื่องนี้มาก่อน .. ฉันมักจะใช้ตารางในการทำเช่นนี้
เพียงแค่สร้างกระดาษห่อหุ้มdisplay: tableและวางสิ่งของไว้ตรงกลางด้วยtext-align: centerสำหรับแนวนอนและvertical-align: middleแนวตั้ง

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

และบางคนก็เป็นแบบนี้

.wrapper{
  display: table; 

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

}

หรือดูJS Fiddle นี้

นี่คือแนวทางที่คุณไม่จำเป็นต้องใช้paddingเพียงแค่ตั้งค่าheightและwidthสำหรับaและปล่อยให้flexแฮนเดิ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>

ตัวอย่างด้านล่างไม่ได้ผลสำหรับฉันนี่คือเวอร์ชันที่ฉันสร้างขึ้น!

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

ลองดู

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 จะถูกแทรกเป็น: before ดังนั้นคุณสามารถจัดแต่งทรงผมหรือสิ่งที่ชอบได้:

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

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

คุณสามารถรับไอคอนกลมโดยใช้รหัสนี้:

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

ตอนนี้ CSS ของคุณจะเป็น:

.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 ที่มี« line-height » แต่ใช้ได้โดยระบุ«ความสูง»จากนั้นเราต้องเพิ่ม«! important »เป็น line-height ...

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

นี่เป็นวิธีแก้ปัญหาที่ดีที่สุดและแม่นยำที่สุดเท่าที่ฉันเคยพบมา

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