원 안에 Font Awesome 아이콘을 만드시겠습니까?


134

일부 프로젝트에서 멋진 글꼴을 사용하고 있지만 멋진 글꼴 아이콘으로 할 일이 있습니다. 다음과 같이 쉽게 아이콘을 호출 할 수 있습니다.

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

모든 아이콘이 항상 테두리가있는 둥근 원 안에있을 수 있습니까? 이와 같은 사진이 있습니다.

여기에 이미지 설명을 입력하십시오

사용

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

효과가 있습니까? 그러나 문제는 아이콘이 텍스트 나 요소 옆에있는 솔루션보다 항상 더 크다는 것입니다.

답변:


175

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>


이전 답변의 JsFiddle : http://fiddle.jshell.net/4LqeN/


6
둥근 원이 아닌 sometning있어?
슈나이더

border-radius요소를 반올림한다. 어떤 맥주를 사용합니까? 내 답변을 접두사로 업데이트합니다
Nico O

4
그러나 이것은 해결책이 아닙니다. 이것은 i내용 이있는 경우에만 작동합니다 . 일반적으로 FA를 사용하면 i- 태그 내에 내용이 없지만 나중에 CSS에 의해 아이콘이 렌더링됩니다 <i class="fa fa-lock"></i>. 이것이 @Schneider가 실제로 요청한 것입니다.
Jan

@Jan 나는 그 내일에 조사 할 것이다. 그러나 나는 문제를 볼 수 없습니다. 태그에는 컨텐츠가 없지만 컨텐츠는 CSS를 통해 추가됩니다. 아이콘이로드되지 않더라도 원이 표시됩니다. 답변으로 볼 수있는 문제의 jsFiddle을 만들 수 있습니까?
Nico O

4
아니요. 이것은 질문에 대한 답변입니다. 질문의 이미지를보십시오. 단단한 원이 아닌 그림자가 있습니다.
Nico O

230

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>

글꼴 멋진 스택 아이콘을 참조하십시오

업데이트 :- 누적 아이콘 바이올린


6
쌓인 아이콘은 2 배까지만 작동합니다. 이보다 더 큰 것을 원한다면 작동하지 않습니다.
J Lee

15
이것이 fontawesome을 사용하여이를 수행하는 "올바른"방법 인 대답이 되었기를 바랍니다. 허용되는 답변은 잘 조정되지 않은 해킹입니다.
ask_io

4
숫자와 동일<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>
m3nda

2
@emrah-사용자 정의 CSS가 아닌 글꼴이 멋진 유일한 옵션이므로 여기보다 더 정확합니다.
ask_io

1
매우 우아한 솔루션. @mmativ 원의 배경색을 의미하는 경우 <i class = "fa fa-circle-thin fa-stack-2x"style = "color : blue"> </ i>
J.Kirk를 수행하면됩니다.

34

CSS 나 HTML 트릭이 필요하지 않습니다. Font Awesome은 클래스를 내장하고 있습니다 -fa-circle 여러 아이콘을 함께 쌓으려면 부모 div에서 fa-stack 클래스를 사용할 수 있습니다

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

// 이제 원 안에 페이스 북 아이콘이 있습니다 :)


2
Sampat Badhe는 2 년 전에 같은 대답을했습니다. 답을 작성하기 전에 다른 답변을 읽지 않는 이유는 무엇입니까?
Taras Yaremkiv

안녕하세요, Sampat에 대해 죄송합니다. 답변을 찾지 못했습니다. 답변을 수정하고 더 많은 솔루션이나 유용한 정보를 추가하려고합니다.
Vasyl Gutnyk

1
좋은 해결책이지만 각 아이콘에 파란색 배경을 제공합니다. 해결 방법이 있습니까?
Jamshaid Kamran

@CodeIt CSS를 사용하여 지우거나 새로운 배경색을 추가하십시오. 문제가되지 않습니다.
Vasyl Gutnyk

27

em기본 측정으로 사용되는 원의 글꼴 아이콘

당신은 다음과 같은 측정을 위해 EMS를 사용하는 경우 line-height, font-sizeborder-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 */
}

13

업데이트 : 오히려 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;
}

즐기세요


텍스트 정렬 추가 : 중앙; 거의 모든 정보를 잘 처리 할 수 ​​있습니다
Marcio

수직 정렬은 어떻습니까?
localhoost

9

이 작업을 수행 할 수도 있습니다. icomoon 아이콘 주위에 원을 추가하고 싶었습니다. 코드는 다음과 같습니다.

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

8

업데이트 :

최근에 유연하게 학습하면 더 깔끔한 방법이 있습니다 (테이블이없고 CSS가 적음). 래퍼 display: flex;를 중심 으로 설정하고 아이들 align-items: center;이 (수직) 및 justify-content: center;(수평) 중심에 대한 속성 을 제공하도록하십시오 .

업데이트 된 JS Fiddle 참조


아무도 전에 이것을 제안한 것이 이상합니다. 나는 항상 이것을하기 위해 테이블을 사용합니다. 수평 및 수직 정렬 을 위해
포장지 display: table안에 그 안에 물건 을 넣고 가운데에 물건을 넣으십시오 .text-align: centervertical-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 피들 참조


이것은 매우 좋고 깨끗하고 작은 것이 아닙니다! 여기 SCSS 대신 CSS를 사용하는 바이올린 jsfiddle.net/bqtkmy0s
summsel

@summsel이가 아닌 정확한 내 원래의 답변으로 같은 일? 방금 CSS가 아닌 scss로 코드를 작성했습니다.
nclsvh

예, 물론입니다. CSS로 솔루션을 시도했으며 CSS를 선호하는 사람들이 많이 있습니다. 그렇다면 왜이 CSS 버전의 jsfiddle을 게시하지 않습니까?
summsel

5

이것은 당신이 사용할 필요가없는 접근 방식 이며 and 를 padding설정 하고 핸들을 사용하십시오 .heightwidthaflexmargin: 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>


4

아래 예제는 저에게 효과적이지 않았습니다. 이것은 내가 만든 버전입니다!

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

3

이 시도

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

2

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>

2

이 코드를 사용하여 원형 아이콘을 얻을 수 있습니다.

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

0

나는«Ever-height»에 대한 Dave Everitt의 대답을 좋아하지만«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;
}

줄 높이는 나를 위해 그것을 해결했다
mecograph

추가 !important는 해결책이 아니라 반창고입니다. 속성을 재정의하는 다른 CSS 속성이 있음을 의미합니다.
TylerH

0

이것은 내가 지금까지 찾은 최고의 가장 정확한 솔루션입니다.

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;
    }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.