4
CSS로 font-awesome 아이콘을 사용할 수 있습니까? 이제 html로 시도했지만 버튼으로 :after:before과 같은 의사 클래스로 사용해야하므로 도움이 될까요? CSS에서 fontAwesome 아이콘을 사용하는 방법?
A
답변
0
당신은 다음과 같이 사용할 수 있습니다 여기에 레드 컬러와 함께 큰 아이콘입니다. 귀하의 코드를 업데이트했습니다.
ul li {
display: inline-block;
}
.right {
float: right;
}
button:after {
content: "\f067";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="right">
<li><button>Note</button></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-user"></i></a></li>
<li><a href="#"><i class="fa fa-book"></i></a></li>
<li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>
1
ul li {
display: inline-block;
}
.right {
float: right;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="right">
<li><button>Note <i class="fa fa-plus"></i></button></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-user"></i></a></li>
<li><a href="#"><i class="fa fa-book"></i></a></li>
<li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>
ul li {
display: inline-block;
}
.right {
float: right;
}
button {
font: normal normal normal 14px/1 FontAwesome;
}
button:after {
content: "\f217";
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="right">
<li><button>Note</i></button></li>
</ul>
2
당신은 당신이글꼴 가장 최고 같이 사용할 수 있음을 알 수 있습니다 :
.my-icon:before {
content: "\f02d"; /* The content of book icon*/
}
.my-icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul>
<li><a href="#"><i class="my-icon"></i></a></li>
</ul>각 아이콘의 코드를 찾아서 사용할 수 있어야합니다. 이 아이콘을 사용하여 요소를 검사하면됩니다 (예 : font-awsome의 웹 사이트).
그리고 당신은 또한 글꼴 크기를 변경하여 아이콘의 크기를 제어 할 수 있습니다.
.my-icon:before {
content: "\f02d"; /* The content of book icon*/
font-size: 32px;
color:red;
}
.my-icon {
display: inline-block;
font: normal normal normal 24px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul>
<li><a href="#"><i class="my-icon"></i></a></li>
</ul>
0
span:before{
content: "\f0c9";
font-family: 'FontAwesome';
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span>hello</span>
당신은 PLZ 설명 할 수 있습니까? 당신은 지금 아이콘을 사용하고 있습니다, 무엇이 문제입니까? –
이 버튼은 CMS에서 생성되므로 html의 버튼 안에 코드를 추가 할 수 있습니다. 하지만 CMS에서 그것에 클래스를 생성하고 나는 또한 CSS에서 구현할 수 있습니다 :) –