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

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>

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

For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

여기에서 main-color가 클래스 인 CSS에서 전역 스타일을 정의했습니다. 필자의 경우 밝은 파란색 색조입니다. Font Awesome으로 아이콘에 인라인 스타일을 사용하면 색상의 의미 론적 인 경우, 예를 들어 별도의 색상을 원한다면 nav-color 등이 잘 작동합니다.

이 웹 사이트의 예제와 예제에서 어떻게 작성했는지에 따라 Font Awesome의 최신 버전은 크기를 조정하는 구문을 약간 변경했습니다.

icon-xxlarge

지금은 어디에서 사용해야합니까?

icon-3x

물론 이것은 환경에 설치 한 Font Awesome의 버전에 따라 다릅니다. 도움이 되었기를 바랍니다.

FontAwesome 4.0에서 클래스는 'fa-2x', 'fa-3x'로 변경됩니다.

간단히 CSS 파일에서 클래스를 정의하고 다음과 같이 html 파일로 캐스케이드 할 수 있습니다

<i class="fa fa-plus fa-lg green"></i> 

이제 CSS로 적어 두십시오.

.green{ color:green}

글꼴이 미리 정의 된 클래스 이름 만 타겟팅

예를 들면 :

HTML

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

CSS

i.fa {
    color: red;
    font-size: 30px;
}

링크 http://www.w3schools.com/icons/fontawesome_icons_intro.asp를 참조하십시오

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

BootstrapCDN에서 직접 아이콘을 사용하려고 할 때도 같은 문제가 발생했습니다 (가장 쉬운 방법). 그런 다음 CSS 파일을 다운로드하여 사이트의 CSS 폴더에 CSS 파일 (글꼴 멋진 설명서의 '쉬운 방법'으로 설명)에 복사하면 모든 것이 제대로 작동하기 시작했습니다.

크레딧 : Font Awesome의 아이콘 색상을 변경할 수 있습니까?

(이 답변 은 해당 답변을 기반 으로합니다)

(예 : 북마크 아이콘의 경우)

inyour.css 파일 :

.icon-bookmark.icon-white {
    color: white;
}

inyour.html 파일 :

<div class="icon-bookmark icon-white"></div>

p 또는 span으로 i 태그를 감싸면 부트 스트랩 CSS 클래스를 사용할 수 있습니다

<p class="text-success"><i class="fa fa-check"></i></p>

대한 글꼴 최고 5 SVG의 버전 사용

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

지적했듯이 멋진 글꼴 아이콘은 텍스트이므로 적절한 CSS 속성을 사용하여 스타일을 지정합니다. 예를 들면 다음과 같습니다.

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

나에게 약간의 변화가 있어도 아이콘 크기가 전혀 바뀌지 않으면 font-size 속성에 "! important"를 추가하십시오.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}

크기 조정 아이콘

Web Fonts + CSS 및 SVG + JS 프레임 워크에는 페이지 UI 컨텍스트에서 아이콘 크기를 조정하기위한 몇 가지 기본 컨트롤이 포함되어 있습니다.

당신은처럼 사용할 수 있습니다

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

.fa-xxx 아이콘의 CSS 속성을 동적으로 변경하십시오.

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

나는 당신에게 fa-5x 등과 같은 글꼴이 멋진 스타일링을 사용하도록 조언하지 않을 것이다. 두려움으로 인해 변경 될 수 있으며 최신 표준을 충족시키기 위해 애플리케이션 코드를 계속 연결해야합니다. 당신은 단순히 같은 클래스가 말하는 동일한 스타일의 멋진 클래스를 제공함으로써 이것을 피할 수 있습니다.

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

여기 수업은 fa-sabi-social-icons입니다.

그런 다음 CSS에서 일반 글꼴의 스타일과 동일한 CSS 규칙을 사용하여 글꼴의 스타일을 지정할 수 있습니다. 예 :

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

멋진 글꼴이 스타일링되어야합니다.