원 안에 Font Awesome 아이콘을 만드시겠습니까?
일부 프로젝트에서 끔찍한 글꼴을 사용하고 있지만 글꼴 멋진 아이콘으로하고 싶은 일이 있습니다. 이런 아이콘을 쉽게 호출 할 수 있습니다
<i class="fa fa-lock"></i>
모든 아이콘이 항상 테두리가있는 둥근 원 안에있을 수 있습니까, 이와 같은 사진이 있습니다.
사용
i
{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
}
효과가 있지만 문제는 아이콘이 항상 솔루션 옆의 txt 또는 요소보다 큽니다.
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/
Font Awesome을 사용하면 다음과 같이 스택 아이콘을 쉽게 사용할 수 있습니다.
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
글꼴 멋진 스택 아이콘을 참조하십시오
업데이트 :- 누적 아이콘 바이올린
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>
// 이제 원 안에 페이스 북 아이콘이 있습니다 :)
당신은 다음과 같은 측정을 위해 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 */
}
업데이트 : 오히려 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 참조
Strange that nobody suggested this before.. I always use tables to do this.
Simply make a wrapper have display: table and center stuff inside it with text-align: center for horizontal and vertical-align: middle for vertical alignment.
<div class='wrapper'>
<i class='icon fa fa-bars'></i>
</div>
and some sass like this
.wrapper{
display: table;
i{
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
or see this JS Fiddle
This is the approach you don't need to use padding, just set the height and width for the a and let the flex handle with 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>The below example didnt quite work for me,this is the version that i made work!
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;
}
try this
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 icons are inserted as a :before. Therefore you can style either your i or a like so:
.i {
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
나는«line-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;
}
이 코드를 사용하여 원형 아이콘을 얻을 수 있습니다.
<a class="facebook-share-button social-icons" href="" target="_blank">
<i class="fab fa-facebook socialicons"></i>
이제 CSS는 다음과 같습니다.
.social-icons {
display: inline-block;border-radius: 60px;box-shadow: 0px 0px 2px #888;padding: 0.5em 0.6em;background: #0D47A1;font-size: 20px;
}.socialicons{color: white;}
참고 URL : https://stackoverflow.com/questions/21905710/make-font-awesome-icons-in-a-circle
'development' 카테고리의 다른 글
| Tomcat을 사용하여 Eclipse에서 웹 서비스를 실행하는 경로 오류가 동일한 여러 컨텍스트 (0) | 2020.07.18 |
|---|---|
| 프로그래밍에 수학이 필요합니까? (0) | 2020.07.18 |
| 대소 문자를 구분하지 않는 PHP in_array 함수 (0) | 2020.07.18 |
| Doctrine 2에서 WHERE IN을 사용하는 방법 (0) | 2020.07.18 |
| 문자열에서 부분 문자열의 발생 (0) | 2020.07.18 |