Thay đổi màu nền của biểu tượng CSS

Bạn không chắc chắn cách thay đổi màu sắc tuyệt vời của phông chữ trên trang web WordPress hoặc HTML của mình?

Và không chỉ tôi, rất nhiều người bối rối khi xây dựng hoặc thay đổi trang web của họ, vì vậy ở đây tôi có một bài đăng độc quyền khác về việc thay đổi màu biểu tượng FontAwesome trong WordPress. Hướng dẫn này rất dễ thực hiện và yêu cầu kiến ​​thức cơ bản về CSS để thay đổi màu sắc của các biểu tượng

Vậy hãy bắt đầu…

Mục lục

• Cách thay đổi màu phông chữAwesome
• Làm cách nào để thêm mã CSS trong WordPress?
• kết thúc

Cách thay đổi màu phông chữAwesome

Thay đổi màu sắc của các biểu tượng thật dễ dàng và bạn có thể dễ dàng sử dụng một dòng mã để thay đổi màu sắc của các biểu tượng phông chữ tuyệt vời cũng như các biểu tượng từ các thương hiệu phổ biến nhất khác

Vì vậy, giả sử chúng ta đang tạo một nút biểu tượng xã hội và muốn thay đổi màu nền của biểu tượng phông chữ fa-facebook tuyệt vời của mình, điều này có thể dễ dàng đạt được bằng cách thêm thuộc tính CSS có tên “background-color” vào “fa” hoặc .  

.fa-facebook {

  background-color: #243c64

}

Tuy nhiên, tùy thuộc vào nhu cầu của bạn, tôi khuyên bạn chỉ nên sử dụng giá trị “background-color” trong thuộc tính “fa-facebook”. Việc thêm dòng mã, như hình trên, sẽ chỉ thay đổi màu nền của biểu tượng fa-facebook chứ không thay đổi các biểu tượng khác trên trang web của bạn – nhưng nếu bạn thêm mã vào thuộc tính “fa”, nó sẽ thay đổi màu nền của

Tương tự, nếu bạn muốn thay đổi màu sắc của biểu tượng, bạn phải sử dụng thuộc tính “color” trong biến CSS “fa” hoặc “fa-facebook” của mình.  

.fa-facebook {

fa3

}

Nó sẽ thay đổi màu của thành phần được chọn trên trang web của bạn.  

Nhưng nếu bạn có hai biểu tượng trên trang web của mình với cùng một biến CSS thì sao?

Nếu bạn có cùng một biểu tượng được sử dụng trên trang web của mình và bạn chỉ muốn thay đổi mã màu của một biểu tượng, thì bạn phải sử dụng mã CSS nội tuyến cho việc này, nếu không nó sẽ thay đổi màu của tất cả các thành phần có cùng một CSS

Sử dụng CSS nội tuyến thực sự dễ dàng và bạn chỉ cần thêm fa5 vào bên trong phần tử HTML

Ví dụ,

fa6

với điều này,

fa7

💡 Lưu ý chính

• Nếu bạn đang sử dụng plugin Trình tạo trang như Elementor, Divi hoặc Visual Composer, bạn có thể dễ dàng thay đổi màu FontAwesome ngay từ bảng điều khiển trình tạo trang của mình,
• và nếu bạn không sử dụng trình tạo trang trên trang web của mình, tôi thực sự khuyên bạn nên sử dụng một trình tạo trang để thiết kế trang web của bạn trôi chảy hơn

Đứng đầu

Làm cách nào để thêm mã CSS trong WordPress?

Thêm mã CSS mà chúng tôi đã chia sẻ ở trên thật dễ dàng trong WordPress. Khi bạn đã quyết định các biểu tượng mà bạn muốn thay đổi màu sắc, hãy chuyển đến “Giao diện > Tùy biến > CSS bổ sung” và dán mã CSS của bạn

Khi bạn đã thêm mã CSS của mình vào trong hộp, hãy nhấp vào nút “Xuất bản” màu xanh lam hiển thị ở góc trên cùng bên trái. Nó sẽ tiếp tục thay đổi và áp dụng CSS mà bạn đã áp dụng trên trang web của mình

Đứng đầu

kết thúc

Thay đổi màu của biểu tượng fontawesome rất dễ dàng và có thể thực hiện trong vài giây. Ở đây trong hướng dẫn này, tôi đã chia sẻ một số cách để thay đổi màu sắc và màu nền của các biểu tượng phông chữ tuyệt vời của bạn một cách dễ dàng. Các cài đặt tương tự có thể được thực hiện cho bất kỳ tệp biểu tượng nào khác

Tôi hy vọng bạn thích bài viết này và nếu bạn thích, hãy chia sẻ nó với bạn bè, gia đình và những người theo dõi của bạn. Ngoài ra, nếu bạn gặp bất kỳ vấn đề nào với việc thay đổi màu sắc của các biểu tượng, thì bạn có thể chia sẻ truy vấn của mình với chúng tôi trong phần bình luận bên dưới

Để thêm hoặc ghi đè CSS. sử dụng tùy chọn “CSS bổ sung” trong tùy biến. https. // codex. báo chí. org/CSS#Custom_CSS_in_WordPress

Tìm hiểu cách sử dụng Công cụ dành cho nhà phát triển Chrome hoặc Công cụ dành cho nhà phát triển Firefox để giúp bạn xem và kiểm tra các thay đổi đối với CSS của mình

được sử dụng rộng rãi để thêm các biểu tượng trên trang web. Để thêm bất kỳ biểu tượng nào trên trang web, cần có liên kết fontawesome bên trong thẻ đầu. Có thể đặt biểu tượng fontawesome bằng cách sử dụng tiền tố fa trước tên của biểu tượng.

Tạo trải nghiệm người dùng tốt có nghĩa là xác định rõ ràng các mục là liên kết hoặc có thể nhấp vào. Nếu bạn sử dụng các biểu tượng, một cách để làm điều đó là thay đổi màu nền và màu biểu tượng khi di chuột

Siêu liên kết là khối xây dựng cơ bản nhất của web. Chúng là những yếu tố mà mọi người tương tác nhiều nhất. Trong những ngày đầu của web, chỉ có văn bản và màu xanh lam được sử dụng để biểu thị các liên kết. Trong thiết kế web hiện đại, chúng ta có thể sáng tạo hơn khi thiết kế các liên kết như sử dụng các biểu tượng nhưng chúng ta cần đảm bảo rằng khả năng sử dụng của các liên kết không bị ảnh hưởng. Khi thiết kế các liên kết biểu tượng, chúng ta cần làm rõ rằng chúng có thể nhấp được. Sử dụng hiệu ứng di chuột để thay đổi biểu tượng và màu nền là một cách hay để cho biết chúng có thể nhấp được

Trong hướng dẫn này, chúng tôi đang sử dụng các biểu tượng FontAwesome. Phông chữ biểu tượng là lý tưởng để làm việc khi bạn muốn thay đổi màu liên kết một cách dễ dàng. Tất cả những gì bạn phải làm là thay đổi thuộc tính color của chúng trong tệp CSS của bạn. Nếu bạn đang sử dụng SVG thay vì FontAwesome, bạn có thể thay đổi màu dễ dàng bằng thuộc tính fa9. Với các tệp ảnh PNG và JPEG, bạn cần cung cấp hai bộ ảnh có màu sắc khác nhau cho mỗi biểu tượng, một cho trạng thái bình thường và một cho trạng thái di chuột. Đây là lý do tại sao các liên kết sử dụng phông chữ biểu tượng và hình ảnh SVG thiết thực hơn nhiều

Vì chúng tôi không sử dụng bất kỳ thẻ a nào cho các liên kết và thay vào đó dựa vào chức năng fa-facebook0 của Javascript, chúng tôi cũng cần chỉ ra các liên kết bằng cách thay đổi con trỏ. Điều này đặc biệt quan trọng đối với người dùng mù màu vì họ không thể phân biệt màu sắc, họ cần các chỉ báo khác cho liên kết. Chúng ta cần đặt fa-facebook1 thành fa-facebook2 để khi người dùng di chuột qua liên kết, con trỏ sẽ thay đổi từ mũi tên thành bàn tay, làm rõ phần tử có thể nhấp được

Liện kết ngoại

Hãy bắt đầu bằng cách đưa các liên kết nguồn Bootstrap và FontAwesome cần thiết vào tệp HTML

HTML

Dưới đây chúng tôi có mã cho hộp chứa Bootstrap với ba liên kết. Thay thế fa-facebook3 trong thuộc tính fa-facebook0 bằng địa chỉ liên kết bạn muốn đặt. Sao chép và dán mã bên dưới và thoải mái tùy chỉnh bố cục và số lượng liên kết khi bạn cần

Lưu ý rằng chúng tôi có một biểu tượng và tiêu đề mô tả với thẻ h3 bên dưới biểu tượng cho mỗi liên kết. Điều này là do bản thân các biểu tượng có thể không đủ mô tả cho người dùng nên chúng tôi cũng cung cấp văn bản để làm rõ nội dung của liên kết. Theo nhóm Nielsen Norman, các biểu tượng cần có nhãn văn bản để làm rõ ý nghĩa của chúng.  

CSS

Đây là mã CSS hoàn chỉnh. Chúng tôi có một div với tên lớp là fa-facebook5 chứa tất cả các hộp biểu tượng. Mỗi hộp biểu tượng trong div có tên lớp fa-facebook6. Chúng tôi không phải chọn riêng các biểu tượng và tiêu đề để đặt màu của chúng. Chúng tôi chỉ cần chọn phần tử fa-facebook6 và khi chúng tôi đặt cho nó một giá trị màu, nó sẽ đặt cả biểu tượng và màu tiêu đề thành giá trị đó

Làm cách nào để thay đổi màu biểu tượng hình ảnh trong CSS?

Cho một hình ảnh và nhiệm vụ là thay đổi màu của hình ảnh bằng CSS. Sử dụng chức năng lọc để thay đổi màu ảnh png . Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng hình ảnh cho hình ảnh. Có nhiều giá trị thuộc tính tồn tại cho chức năng lọc.

Làm cách nào để thay đổi màu biểu tượng trên CSS di chuột?

Cách thay đổi màu biểu tượng và màu nền khi di chuột .

​x. // Ví dụ Thay đổi màu phông chữ biểu tượng. . biểu tượng { màu. #000;.

.

ct-icon-box. ct-icon-box { padding-top. 8px; . 50%;

Làm cách nào để thêm biểu tượng trong CSS nền?

Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng, chẳng hạn như Phông chữ tuyệt vời. Thêm tên của lớp biểu tượng đã chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như . Tất cả các biểu tượng trong thư viện biểu tượng bên dưới, là các vectơ có thể mở rộng có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v. )

Đọc tiếp