Cách tạo kiểu cho màu sắc biểu tượng, kích thước và bóng của Biểu tượng Phông chữ Tuyệt vời

Làm cách nào tôi có thể định kiểu màu sắc, kích thước và bóng của các biểu tượng từ Biểu tượng của Font Awesome ?

Ví dụ: trang web của Font Awesome sẽ hiển thị một số biểu tượng màu trắng và một số màu đỏ nhưng sẽ không hiển thị CSScách tạo kiểu cho chúng theo cách đó ...

Vì chúng chỉ đơn giản là phông chữ, nên bạn có thể định kiểu chúng thành phông chữ:

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

Bạn cũng có thể chỉ cần thêm kiểu nội tuyến:

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

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

Nếu bạn đang sử dụng Bootstrap cùng một lúc, bạn có thể sử dụng:

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

Nếu không thì:

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

Có vẻ như màu biểu tượng FontAwgie phản ứng với thông tin văn bản, lỗi văn bản, v.v.

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

tập tin inyour.css:

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

tập tin inyour.html:

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

Có một cách thực sự đơn giản để thay đổi màu sắc của các biểu tượng 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>

Bạn có thể thay đổi mã hex theo sở thích của bạn. GHI CHÚ: Màu văn bản cũng sẽ thay đổi màu biểu tượng trừ khi có một thẻ style="color:#00cc6a"trong ithẻ.

Sử dụng thêm FA 4.4.0

.text-danger
    color: #d9534f

vào tài liệu css và sau đó sử dụng

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

thay đổi màu thành màu đỏ. Bạn có thể thiết lập của riêng bạn cho bất kỳ màu nào.

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://fortawgie.github.io/Font-Awgie/examples/

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

Ở đây tôi đã định nghĩa một phong cách toàn cầu trong CSS của mình trong đó màu chính là một lớp, trong trường hợp của tôi, nó là một màu xanh nhạt. Tôi thấy rằng việc sử dụng các kiểu nội tuyến trên Biểu tượng với Phông chữ Tuyệt vời hoạt động tốt, đặc biệt trong trường hợp khi bạn đặt tên màu của mình theo ngữ nghĩa, nghĩa là màu điều hướng nếu bạn muốn có một màu riêng cho điều đó, v.v.

Trong ví dụ này trên trang web của họ và cũng như cách tôi đã viết trong ví dụ của mình, phiên bản mới nhất của Font Awesome đã thay đổi cú pháp một chút về việc điều chỉnh kích thước. Trước đây, nó được sử dụng là:

icon-xxlarge

bây giờ tôi phải sử dụng ở đâu:

icon-3x

Tất nhiên, tất cả phụ thuộc vào phiên bản Font Awesome bạn đã cài đặt trên môi trường của bạn. Hi vọng điêu nay co ich.

Trong FontAwgie 4.0, các lớp thay đổi thành 'fa-2x', 'fa-3x'.

Đơn giản là bạn có thể định nghĩa một lớp trong tệp css của mình và xếp nó vào tệp html như

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

bây giờ viết vào css

.green{ color:green}

Chỉ cần nhắm mục tiêu tên lớp được xác định trước phông chữ tuyệt vời

trong ví dụ:

HTML

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

CSS

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

Vui lòng tham khảo liên kết http://www.w3schools.com/icons/fontawclaw_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>

Tôi gặp vấn đề tương tự khi tôi cố gắng sử dụng các biểu tượng trực tiếp từ BootstrapCDN (cách dễ nhất). Sau đó, tôi đã tải xuống tệp CSS và sao chép nó vào thư mục CSS của trang web của tôi tệp CSS (Được mô tả theo 'cách dễ dàng' trong tài liệu tuyệt vời về phông chữ) và mọi thứ bắt đầu hoạt động như bình thường.

Tín dụng: Tôi có thể thay đổi màu của màu biểu tượng của Font Awesome không?

(câu trả lời này dựa trên câu trả lời đó)

(ví dụ như biểu tượng dấu trang :)

tập tin inyour.css:

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

tập tin inyour.html:

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

Gói thẻ i trong p hoặc span, sau đó bạn có thể sử dụng lớp css bootstrap

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

Đối với phiên bản Font Awesome 5 SVG , hãy sử dụng

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

Như đã được chỉ ra, các biểu tượng tuyệt vời của phông chữ là văn bản, do đó bạn tạo kiểu cho nó bằng các thuộc tính CSS thích hợp. Ví dụ:

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

Nếu, vì nó xảy ra khá nhiều với tôi, kích thước biểu tượng hoàn toàn không thay đổi, hãy thêm "! Quan trọng" vào thuộc tính kích thước phông chữ.

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

Đối với kích thước biểu tượng

Cả hai khung Web Font + CSS và SVG + JS của chúng tôi đều có một số điều khiển cơ bản để định cỡ các biểu tượng trong ngữ cảnh giao diện người dùng của trang của bạn.

bạn có thể sử dụng như

<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://fontawgie.com/how-to-use/on-the-web/stomme/sizing-icons

Tự động thay đổi các thuộc tính css của các biểu tượng .fa-xxx:

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

Tôi sẽ không khuyên bạn sử dụng kiểu dáng phông chữ tuyệt vời như fa-5x, v.v. vì sợ họ có thể thay đổi nó và bạn sẽ phải tiếp tục sử dụng mã ứng dụng của mình để đáp ứng với tiêu chuẩn mới nhất. Bạn chỉ cần tránh điều này bằng cách cung cấp cho mỗi lớp phông chữ tuyệt vời mà bạn muốn tạo kiểu đồng nhất cùng một lớp nói:

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

Ở đây lớp là fa-sabi-social-icon

Sau đó, trong css của bạn, bạn có thể tạo kiểu cho các phông chữ bằng cách sử dụng cùng các quy tắc css mà bạn sẽ tạo kiểu cho một phông chữ bình thường. ví dụ

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

Điều đó sẽ giúp phông chữ của bạn - phông chữ tuyệt vời theo kiểu