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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,491
Được Like
10,733
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


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 Bottom