Tutorial 2x Cài đặt biểu tượng Font Awesome 5.3.1 và cách sử dụng trên XenForo 2

PVS

Generalissimo
Thành viên BQT
Cài đặt biểu tượng Font Awesome 5.3.1 và cách sử dụng trên XenForo 2

Bài viết sẽ hướng dẫn cách cài đặt biểu tượng Font Awesome 5.3.1 và cách sử dụng nó trên XenForo 2.

Vào template PAGE_CONTAINER tìm:
Mã:
<head>

Thêm đoạn code bên dưới vào phía sau:
Mã:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Biểu tượng Font Awesome 5.3.1 các bạn có thể xem tại: https://fontawesome.com/icons

Ví dụ: đây là một widget sử dụng HTML:
Mã:
<i class="fab fa-angrycreative"></i><br>
<i class="fas fa-door-open"></i><br>
<i class="fas fa-car-crash"></i><br>
<i class="fas fa-charging-station"></i>

Screenshot_1 (1).png

CSS :
Mã:
.username--style3:before {
font-family: "Font Awesome 5 Brands";
content: "\f179";
padding-right: 4px;
display: inline-block;
}

Screenshot_2.png

Mã:
.username--style3:before {
font-family: "Font Awesome 5 Free";
content: "\f5d0";
padding-right: 4px;
display: inline-block;
}

Screenshot_1.png

Các biểu tượng:
CSS font-family :
  • Brands : font-family: "Font Awesome 5 Brands";
  • Solid : font-family: "Font Awesome 5 Free";
  • Regular : font-family: "Font Awesome 5 Pro";
  • Light : font-family: "Font Awesome 5 Pro ";
Ngoài ra, có thể tham khảo thêm cách dùng tại: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top