글꼴 멋진 아이콘의 아이콘 색상, 크기 및 그림자 스타일을 지정하는 방법
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>
색상을 빨간색으로 변경합니다. 당신은 어떤 색상에 대한 자신을 설정할 수 있습니다.
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}
크기 : 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; }``
링크 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>
글꼴이 미리 정의 된 클래스 이름 만 타겟팅
예를 들면 :
HTML
<i class="fa fa-facebook"></i>
CSS
i.fa {
color: red;
font-size: 30px;
}
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;
}
.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);
크기 조정 아이콘
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-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;
}
멋진 글꼴을 스타일링해야합니다.
'Programming' 카테고리의 다른 글
| URL에 주어진 문자열이 포함되어 있는지 확인하는 방법은 무엇입니까? (0) | 2020.03.04 |
|---|---|
| Xcode 4에서 프로젝트 이름 바꾸기 (0) | 2020.03.04 |
| C #에서 현재 실행 파일의 이름을 어떻게 얻습니까? (0) | 2020.03.04 |
| location.host와 location.hostname 및 크로스 브라우저 호환성? (0) | 2020.03.04 |
| vim에서 탭을 공백으로 바꿉니다. (0) | 2020.03.04 |