[css] 글꼴 멋진 아이콘의 아이콘 색상, 크기 및 그림자 스타일을 지정하는 방법

Font Awesome ‘s Icons 에서 아이콘의 색상, 크기 및 그림자 스타일을 어떻게 지정할 수 있습니까?

예를 들어 Font Awesome의 사이트 는 일부 아이콘은 흰색으로, 일부는 빨간색으로 표시하지만 CSS스타일을 지정하는 방법 은 표시하지 않습니다 …

답변

그것들은 단순히 글꼴이라는 것을 감안할 때 글꼴로 스타일을 지정할 수 있어야합니다.

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

답변

스타일을 인라인으로 추가 할 수도 있습니다.

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>

답변

부트 스트랩을 동시에 사용하는 경우 다음을 사용할 수 있습니다.

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

그렇지 않으면:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

답변

FontAwesome 아이콘 색상이 텍스트 정보, 텍스트 오류 등에 응답하는 것처럼 보입니다.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

답변

inyour.css 파일 :

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html 파일 :

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

답변

Font Awesome 아이콘의 색상을 변경하는 정말 간단한 방법이 있습니다.

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

스 니펫 확장

16 진 코드를 원하는대로 변경할 수 있습니다. 참고 : 태그 style="color:#00cc6a"안에 가 없으면 텍스트 색상은 아이콘 색상도 변경합니다 i.

답변

FA 4.4.0 추가 사용

.text-danger
    color: #d9534f

문서 CSS에 다음을 사용하여

 <i class="fa fa-ban text-danger"></i>

색상을 빨간색으로 변경합니다. 당신은 어떤 색상에 대한 자신을 설정할 수 있습니다.