원형으로 글꼴 멋진 아이콘 만들기?
나는 몇몇 프로젝트에서 폰트 멋진 아이콘을 사용하고 있지만 폰트 멋진 아이콘으로 하고 싶은 것이 몇 가지 있습니다. 나는 다음과 같은 아이콘을 쉽게 부를 수 있습니다.
<i class="fa fa-lock"></i>
모든 아이콘이 항상 테두리가 있는 둥근 원 안에 있는 것이 가능합니까?이와 같은 것, 나는 사진을 가지고 있습니다.
사용.
i {
background-color: white;
border-radius: 50%;
border: 1px solid grey;
padding: 10px;
}
효과는 있겠지만, 문제는 아이콘이 항상 텍스트나 요소 옆에 있는 것보다 크다는 것입니다. 해결책이 있습니까?
Font Awesome을 사용하면 다음과 같은 스택형 아이콘을 쉽게 사용할 수 있습니다.
업데이트: Font Awesome v6.2.1
<span class="fa-stack fa-2x">
<i class="fa-thin fa-circle fa-stack-2x"></i>
<i class="fa-solid fa-lock fa-stack-1x fa-inverse"></i>
</span>
업데이트: Font Awesome v5.15.4
<span class="fa-stack fa-2x">
<i class="fal fa-circle fa-stack-2x"></i>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
i.fa {
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 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 of old answer: http://fiddle.jshell.net/4LqeN/
당신은 그것을 위해 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>
//그리고 이제 원 안에 페이스북 아이콘이 있습니다:)
다음을 사용하여 원의 글꼴 아이콘em기본 치수로
다음을 포함하여 측정에 ems를 사용하는 경우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 */
}
업데이트: 플렉스를 사용합니다.
정확성을 원한다면 이것이 최선의 방법은 방법입니다.
Fiddle. Go Play -> 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;
}
참고: 더 이상 사용하지 마십시오.플렉스 박스를 사용합니다.
이것도 할 수 있습니다.아이콘 주위에 원을 추가하고 싶었습니다.여기 코드가 있습니다.
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;중심을 잡는 것
전에 아무도 이것을 제안하지 않았다는 것이 이상합니다.저는 항상 이것을 하기 위해 테이블을 사용합니다.
포장지를 만들기만 하면 됩니다.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 피들을 보세요.
이것은 당신이 사용할 필요가 없는 접근법입니다.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 또는 i와 같은 스타일을 지정할 수 있습니다.
.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;}
저는 데이브 에버릿의 "줄 높이"에 대한 답변이 마음에 들지만, "높이"를 지정한 다음 "!중요"를 줄 높이에 추가해야 합니다...
.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;
}
그냥 이 CSS 클래스를 사용할 수 있습니다.
.i{
display: flex;
padding: .5rem;
background-color: #888;
border-radius: 50%;
}
이것이 당신의 일을 끝낼 것입니다.
언급URL : https://stackoverflow.com/questions/21905710/make-font-awesome-icons-in-a-circle
'programing' 카테고리의 다른 글
| 다른 열과 같은 열에 SQL 가입 (0) | 2023.09.04 |
|---|---|
| 상위 9개로 정렬된 카운트(count_id)를 기준으로 상위 9개 및 기타를 가져온 다음 다른 카운트를 'club' 범주로 묶는 방법 (0) | 2023.09.04 |
| OpenCV & Python - 이미지가 너무 커서 표시할 수 없습니다. (0) | 2023.09.04 |
| 시퀀스 점(c) (0) | 2023.09.04 |
| Android Fragment 핸들 뒤로 버튼 누르기 (0) | 2023.09.04 |