FontAwesome 아이콘의 아이콘 색상, 크기 및 그림자 스타일 설정 방법

FontAwesome 아이콘의 아이콘 색상, 크기 및 그림자 스타일 설정 방법

글꼴 어썸 아이콘의 아이콘 색상, 크기 및 그림자를 어떻게 스타일링할 수 있습니까?

예를 들어, FontAwesome의 사이트는 일부 아이콘을 흰색으로 표시하고 일부 아이콘은 빨간색으로 표시하지만 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>

.vmdk 파일:

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

.vmdk 파일:

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

• 크기:fa-lg,fa-2x,fa-3x,fa-4x,fa-5x
• 색상:<i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>
• :.fa-linkedin-square{text-shadow: 3px 6px #272634;}

폰트 어썸 아이콘의 색상을 변경할 수 있는 정말 간단한 방법이 있습니다.

<!-- 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>

색상을 빨간색으로 변경합니다.어떤 색상이든 자신만의 설정이 가능합니다.

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

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

여기서 저는 메인 색상이 클래스인 CSS에서 글로벌 스타일을 정의했습니다. 저의 경우 밝은 파란색 색상입니다.글꼴 Awesome 아이콘에서 인라인 스타일을 사용하는 것이 효과적이라는 것을 알게 되었습니다. 특히 색 이름을 의미적으로 지정하는 경우, 즉 별도의 색을 원하는 경우 nav-color 등이 해당됩니다.

그들의 웹사이트에 있는 이 예시와 제가 제 예시에서 어떻게 썼는지, Font Awesome의 최신 버전은 크기를 조정하는 구문을 약간 변경했습니다.이전에는:

icon-xxlarge

이제 사용해야 할 부분:

icon-3x

물론 이 모든 것은 사용자 환경에 설치한 Font Awesome 버전에 따라 달라집니다.이게 도움이 되길 바랍니다.

사전 정의된 클래스 이름과 글꼴만 지정

예:

HTML

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

CSS

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

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

단순히 당신은 당신의 css 파일에서 클래스를 정의하고 그것을 html 파일로 캐스케이드할 수 있습니다.

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

이제 css로 적으세요.

.green{ color:green}

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>

제가 부트스트랩 CDN에서 직접 아이콘을 사용하려고 했을 때(가장 쉬운 방법) 같은 문제가 있었습니다.그런 다음 CSS 파일을 다운로드하여 사이트의 CSS 폴더에 CSS 파일을 복사했습니다(글꼴 대박 설명서의 '쉬운 방법'에 따라 설명됨). 모든 것이 정상적으로 작동하기 시작했습니다.

크레디트 : 폰트 어썸의 아이콘 색상을 변경할 수 있나요?

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

(예: 책갈피 아이콘의 경우)

.vmdk 파일:

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

.vmdk 파일:

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

i 태그를 p 또는 span으로 감싼 다음 부트스트랩 css 클래스를 사용할 수 있습니다.

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

Font Awesome 5 SVG 버전의 경우,

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

지적했듯이 폰트 멋진 아이콘은 텍스트이므로 적절한 CSS 속성을 사용하여 스타일을 지정할 수 있습니다.예:

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

아이콘 크기가 전혀 변경되지 않으면 글꼴 크기 속성에 "!important"를 추가합니다.

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

크기 조정 아이콘용

웹 글꼴 + 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-xx 아이콘의 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-lg, fa-2x, fa-3x, fa-4x, fa-5x와 같은 것을 사용하여 용기에 상대적인 아이콘 크기를 늘리려고 합니다.

예:-

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;
}

그렇게 하면 멋진 글꼴 스타일을 만들 수 있을 거예요.

다음은 글꼴 스타일 지정 방법의 예입니다.

.arrow i.fa {
  color: white !important;
  font-size: 2.2rem;
  opacity: .3;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="arrow d-none d-md-block">
  <i class="fa fa-angle-down"></i>
</div>

바로 그겁니다.

언급URL : https://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-fontawesome-icons