Cách sử dụng biểu tượng phông chữ tuyệt vời trong HTML – cách sử dụng font html tuyệt vời

Font Awesome v4.7.0 là một bộ sưu tập gồm 675 biểu tượng vector. Nó dễ sử dụng, nhanh chóng và hoàn toàn miễn phí. Bạn có thể tích hợp nó vào dự án html của mình theo hai cách. Cách đầu tiên là ‘Sử dụng liên kết CDN’ chỉ yêu cầu một dòng mã và cách thứ hai là ‘Tải xuống & cài đặt’ trong đó bạn phải tải xuống và cài đặt gói theo cách thủ công. Hãy để chúng tôi xem xét cả hai trong số họ.

Bạn đang xem : cách sử dụng phông chữ tuyệt vời trong html

Biểu tượng phông chữ tuyệt vời là một cách tuyệt vời để hiển thị các biểu tượng trong trang html của bạn. Thật dễ dàng, nhanh chóng và miễn phí. Ừ! Nó miễn phí. Ai không thích những thứ miễn phí, hả? Ở đây, tôi sẽ trình bày cách cài đặt và sử dụng font-awesome trong trang html của bạn. Nhưng, ngay trước đó, bạn có thể muốn hỏi-

(Tuyên bố từ chối trách nhiệm- Bài đăng này chứa các liên kết liên kết.)

Font Awesome là gì?

Trước tiên, hãy để chúng tôi xem phông chữ tuyệt vời thực sự là gì,

Font Awesome là một bộ sưu tập duy nhất gồm 675 đồ họa vectơ có thể mở rộng có thể được điều chỉnh về kích thước, màu sắc và hầu hết mọi thứ có thể được thực hiện cho bất kỳ phông chữ nào có CSS. Nói một cách dễ hiểu, chúng trông giống như các biểu tượng, nhưng bạn có thể xử lý chúng dưới dạng phông chữ.

Có hai cách để bạn có thể tích hợp phông chữ tuyệt vời vào html của mình –

1. Liên kết Font Awesome (CDN)
2. Tải xuống & amp; Cài đặt

Liên kết Font Awesome (CDN):

Đây là cách dễ nhất để có được phông chữ tuyệt vời chỉ với một dòng mã trong trang html của bạn & lt; head & gt; nhãn. Không cần tải xuống, cài đặt hoặc cấu hình trong trường hợp này. Chỉ cần một dòng mã và bạn đã sẵn sàng –

 & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min .css "& gt;  

Ví dụ dưới đây cho thấy cách sử dụng mã này trong trang html của bạn –

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; i class = "fa fa-futboll-0" & gt; & lt; / i & gt;
& lt; i class = "fa fa-futboll-0" style = "font-size: 50px;" & gt; & lt; / i & gt;
& lt; i class = "fa fa-futboll-0" style = "font-size: 60px; color: red;" & gt; & lt; / i & gt;
& lt; / body & gt;
& lt; / html & gt;  

Tải xuống & amp; Cài đặt

Không phải lúc nào bạn cũng nên sử dụng liên kết CDN trong dự án của mình vì nó chỉ hoạt động nếu thiết bị của bạn được kết nối với Internet, chẳng hạn như ở chế độ sản xuất. Nhưng trong trường hợp ở chế độ phát triển, nếu bạn muốn làm việc với các biểu tượng phông chữ tuyệt vời ngay cả khi không có bất kỳ kết nối internet nào, bạn có thể tải xuống và giải nén gói phông chữ tuyệt vời vào thư mục dự án của bạn và thêm mã này vào bên trong & lt; head & gt; tag-

 & lt; link rel = "stylesheet" href = "myProjectPath / font-awesome / css / font-awesome.min.css" & gt;  

Ví dụ này cho thấy cách sử dụng mã này trong trang html của bạn –

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome & lt; / title & gt;
& lt; link rel = "stylesheet" href = "myProjectPath / font-awesome / css / font-awesome.min.css" & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; i class = "fa fa-futboll-0" & gt; & lt; / i & gt;
& lt; i class = "fa fa-futboll-0" style = "font-size: 50px;" & gt; & lt; / i & gt;
& lt; i class = "fa fa-futboll-0" style = "font-size: 60px; color: red;" & gt; & lt; / i & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Cách sử dụng Font Awesome?

Bây giờ, chúng tôi biết cách tích hợp phông chữ tuyệt vời trong dự án của mình. Bây giờ chúng ta hãy xem với một số ví dụ về cách sử dụng nó-

Biểu tượng lớn hơn:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome - Biểu tượng lớn hơn & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; phong cách & gt;
* {
font-family: monospace, sans-serif;
}

bảng, td, th {
border: 1px solid #ddd;
text-align: left;
}

bàn {
biên giới-sụp đổ: sự sụp đổ;
chiều rộng: 100%;
}

th, td {
đệm: 15px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Ví dụ về Font Awesome - Biểu tượng lớn hơn & lt; / h1 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Biểu tượng & lt; / th & gt;
& lt; th & gt; Mã & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-cặp" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-cặp & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-cặp fa-2x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-cặp fa-2x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-cặp fa-3x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-cặp fa-3x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-cặp fa-4x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-cặp fa-4x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-cặp fa-5x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-cặp fa-6x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;

& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Kết quả:

font-awesome-example-large-icon

Biểu tượng danh sách:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome - Biểu tượng Danh sách & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; phong cách & gt;
* {
font-family: monospace, sans-serif;
}

bảng, td, th {
border: 1px solid #ddd;
text-align: left;
}

bàn {
biên giới-sụp đổ: sự sụp đổ;
chiều rộng: 100%;
}

th, td {
đệm: 15px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Ví dụ về Phông chữ Tuyệt vời - Biểu tượng Danh sách & lt; / h1 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Danh sách Biểu tượng & lt; / th & gt;
& lt; th & gt; Mã & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; ul class = "fa-ul" & gt;
& lt; li & gt; & lt; i class = "fa-li fa fa-rô-ô vuông" & gt; & lt; / i & gt; Liệt kê Mục 1 & lt; / li & gt;
& lt; li & gt; & lt; i class = "fa-li fa fa-check-square-o" & gt; & lt; / i & gt; Liệt kê Mục 2 & lt; / li & gt;
& lt; li & gt; & lt; i class = "fa-li fa fa-square-o" & gt; & lt; / i & gt; Liệt kê Mục 3 & lt; / li & gt;
& lt; / ul & gt;
& lt; / td & gt;
& lt; td & gt;
& lt; trước & gt; & amp; lt; ul class = & amp; quot; fa-ul & amp; quot; & amp; gt;
& amp; lt; li & amp; gt; & amp; lt; i class = & amp; quot; fa-li fa fa-rô-ô vuông & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Liệt kê Mục 1 & amp; lt; / li & amp; gt;
& amp; lt; li & amp; gt; & amp; lt; i class = & amp; quot; fa-li fa fa-check-square-o & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Liệt kê Mục 2 & amp; lt; / li & amp; gt;
& amp; lt; li & amp; gt; & amp; lt; i class = & amp; quot; fa-li fa fa-vuông-o & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Liệt kê Mục 3 & amp; lt; / li & amp; gt;
& amp; lt; / ul & amp; gt;
& lt; / pre & gt;
& lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Kết quả:

font-awesome-example-list-icon

Biểu tượng máy xúc / máy quay:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome - Biểu tượng Bộ tải / Con quay & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; phong cách & gt;
* {
font-family: monospace, sans-serif;
}

bảng, td, th {
border: 1px solid #ddd;
text-align: left;
}

bàn {
biên giới-sụp đổ: sự sụp đổ;
chiều rộng: 100%;
}

th, td {
đệm: 15px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Ví dụ về Phông chữ Tuyệt vời - Biểu tượng Bộ tải / Con quay & lt; / h1 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Vòng quay biểu tượng & lt; / th & gt;
& lt; th & gt; Mã & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-spinner fa-spin fa-2x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa fa-spinner fa-spin fa-2x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-circle-o-notch fa-spin fa-2x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-circle-o-notch fa-spin fa-2x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt ;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-refresh fa-spin fa-2x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-refresh fa-spin fa-2x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-cog fa-spin fa-2x" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa fa-cog fa-spin fa-2x & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;

& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Kết quả:

font-awesome-example-loaders-spinners-icon

Biểu tượng màu:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome - Biểu tượng Màu & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; phong cách & gt;
* {
font-family: monospace, sans-serif;
}

bảng, td, th {
border: 1px solid #ddd;
text-align: left;
}

bàn {
biên giới-sụp đổ: sự sụp đổ;
chiều rộng: 100%;
}

th, td {
đệm: 15px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Ví dụ về Phông chữ Tuyệt vời - Biểu tượng Màu & lt; / h1 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Biểu tượng & lt; / th & gt;
& lt; th & gt; Mã & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-gamepad fa-3x" style = "color: green" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa fa-gamepad fa-3x & amp; quot; & amp; gt; style = & amp; quot; color: green & amp; quot; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-heartbeat fa-3x" style = "color: red" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-heartbeat fa-3x & amp; quot; & amp; gt; style = & amp; quot; color: red & amp; quot; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-fire fa-3x" style = "color: orange" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa-fire fa-3x & amp; quot; & amp; gt; style = & amp; quot; color: cam & amp; quot; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; i class = "fa fa-gift fa-3x" style = "color: blue" & gt; & lt; / i & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; i class = & amp; quot; fa fa fa-gamepad fa-3x & amp; quot; & amp; gt; style = & amp; quot; color: blue & amp; quot; & amp; lt; / i & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Kết quả:

font-awesome-example-color-icon

Các nút chỉ có biểu tượng:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome - Các nút chỉ có biểu tượng & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; phong cách & gt;
* {
font-family: monospace, sans-serif;
}

bảng, td, th {
border: 1px solid #ddd;
text-align: left;
}

bàn {
biên giới-sụp đổ: sự sụp đổ;
chiều rộng: 100%;
}

th, td {
đệm: 15px;
}

.custom-button {
đệm: 5px 7px;
màu trắng;
nền: # FF7043;
float: trái;
lề: 2px;
viền: 0;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Ví dụ về Phông chữ Tuyệt vời - Các nút chỉ có biểu tượng & lt; / h1 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Các nút chỉ có biểu tượng & lt; / th & gt;
& lt; th & gt; Mã & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-sign-in" aria-hidden = "true" & gt; & lt; / i & gt; & lt; / button & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-sign-in & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & amp; lt; / button & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-sign-out" aria-hidden = "true" & gt; & lt; / i & gt; & lt; / button & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-sign-out & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & amp; lt; / button & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-remove" aria-hidden = "true" & gt; & lt; / i & gt; & lt; / button & gt; & lt; / td & gt ;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-remove & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & amp; lt; / button & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-share" aria-hidden = "true" & gt; & lt; / i & gt; & lt; / button & gt; & lt; / td & gt ;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-share & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; & amp; lt; / button & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;  

Kết quả:

font-awesome-example-button-with-only-icon

Các nút có biểu tượng và văn bản:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Font Awesome - Các nút có biểu tượng và văn bản & lt; / title & gt;
        & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" & gt;
& lt; phong cách & gt;
* {
font-family: monospace, sans-serif;
}

bảng, td, th {
border: 1px solid #ddd;
text-align: left;
}

bàn {
biên giới-sụp đổ: sự sụp đổ;
chiều rộng: 100%;
}

th, td {
đệm: 15px;
}

.custom-button {
đệm: 5px 7px;
màu trắng;
nền: # FF7043;
float: trái;
lề: 2px;
viền: 0;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Ví dụ về Phông chữ Tuyệt vời - Các nút có biểu tượng và văn bản & lt; / h1 & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Nút có biểu tượng & amp; văn bản & lt; / th & gt;
& lt; th & gt; Mã & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-sign-in" aria-hidden = "true" & gt; & lt; / i & gt; Đăng nhập & lt; / nút & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-sign-in & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Đăng nhập & amp; lt; / nút & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-sign-out" aria-hidden = "true" & gt; & lt; / i & gt; Đăng xuất & lt; / nút & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-sign-out & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Đăng xuất & amp; lt; / nút & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-remove" aria-hidden = "true" & gt; & lt; / i & gt; Xóa & lt; / nút & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-remove & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Xóa & amp; lt; / nút & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; & lt; button class = "custom-button" & gt; & lt; i class = "fa fa-share" aria-hidden = "true" & gt; & lt; / i & gt; Chia sẻ & lt; / nút & gt; & lt; / td & gt;
& lt; td & gt; & amp; lt; button class = & amp; quot; custom-button & amp; quot; & amp; gt; & amp; lt; i class = & amp; quot; fa fa-share & amp; quot; aria-hidden = & amp; quot; true & amp; quot; & amp; gt; & amp; lt; / i & amp; gt; Chia sẻ & amp; lt; / nút & amp; gt; & lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / body & gt;
& lt; / html & gt;  

Kết quả:

font-awesome-example-button-with-icon-and-text

Vì vậy, với tất cả các ví dụ ở trên, bạn có thể thấy việc cài đặt và sử dụng phông chữ tuyệt vời trong html của mình dễ dàng như thế nào.

Xem Thêm  PHP - Phiên - phiên php là gì

Phông chữ thay thế tuyệt vời

Khi nói đến biểu tượng vectơ, tốt nhất là phông chữ tuyệt vời. Nhưng nó vẫn có giới hạn của nó. Bạn có thể không tìm thấy biểu tượng mình đang tìm trong bộ sưu tập 675 biểu tượng. Ngoài ra, đôi khi bạn cần một số biểu tượng được thiết kế riêng cho trang web của mình vì các biểu tượng đẹp có thể làm cho trang web của bạn đẹp hơn.

Sự thay thế tuyệt vời cho phông chữ tốt nhất là trang web biểu tượng phổ biến nhất thế giới iconfinder.com . Bản thân cái tên đã nói lên toàn bộ câu chuyện, tuy nhiên, đây là một số điểm nổi bật-

  • Hàng nghìn biểu tượng chất lượng cao [Miễn phí & amp; Premium] để lựa chọn với tính năng tìm kiếm tuyệt vời.
  • Mỗi biểu tượng ở nhiều kích thước : 16 x 16, 20 x 20, 24 x 24, 32 x 32, 48 x 48, 64 x 64, 128, 128, 256 x 256, 512 x 512.
  • Mỗi biểu tượng ở nhiều định dạng : SVG (vectơ), PNG, ICO, ICNS, Adobe Illustrator.
  • Hơn 1800+ nhà thiết kế để có được các biểu tượng tùy chỉnh dựa trên nhu cầu cụ thể của bạn.
  • Được tin cậy bởi các công ty hàng đầu thế giới: DROPBOX, AMAZON, NETFLIX, SAMSUNG

Nếu bạn quan tâm đến iconfinder pro, bạn có thể đăng ký bằng cách nhấp vào vào đây . Nếu bạn muốn thử với các biểu tượng tuyệt vời về phông chữ, bạn có thể xem danh sách đầy đủ các biểu tượng phông chữ tuyệt vời tại đây .

Xem Thêm  CSS @Import: Làm cách nào để nhập tệp CSS trong CSS khác? - sử dụng nhập trong css


Xem thêm những thông tin liên quan đến chủ đề cách sử dụng font html tuyệt vời

etrailer | Draw-Tite Max-Frame Trailer Hitch Installation – 2020 Dodge Durango

alt

  • Tác giả: etrailer.com
  • Ngày đăng: 2021-08-29
  • Đánh giá: 4 ⭐ ( 9713 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Click for more info and reviews of this Draw-Tite Trailer Hitch:\r
    https://www.etrailer.com/Trailer-Hitch/Draw-Tite/DT38MR.html\r
    Check out some similar Trailer Hitch options:\r
    https://www.etrailer.com/fitguide.htm\r
    \r
    Search for other popular Dodge Durango parts and accessories:\r
    https://www.etrailer.com/vehicle/2020/Dodge/Durango\r
    \r
    https://www.etrailer.com\r
    Don’t forget to subscribe!\r
    https://www.youtube.com/user/etrailertv\r
    \r
    Full transcript: https://www.etrailer.com/tv-install-draw-tite-trailer-hitch-2020-dodge-durango-dt38mr.aspx\r
    Today, we’re gonna be going over, and showing you how to install, the Draw-Tite trailer hitch receiver, here on a 2020 Dodge Durango. So, this is what our trailer hitch is gonna look like installed. And, as we can see, everything is actually hidden behind the bumper here. So, the hitch has a completely factory-like appearance, while we have the cover panel installed. When we’re ready to use the hitch, it’s very easy to remove this. There’s gonna be two tabs at the bottom. \r
    \r
    We’ll simply twist those, and we can pry the bottom section out. And there’ll be a couple of clips at the top. As you can see here, here is the receiver tube for our trailer hitch. So, adding a trailer hitch to your Durango, it’s gonna be an excellent option, because it’s gonna make your vehicle that much more versatile. Now, we can obviously use the trailer hitch for towing, but if we wanted to hit the trails, or free up some space inside the vehicle for those long road trips, we can easily attach either a hitch-mounted cargo carrier, or a hitch-mounted bike rack.\r
    \r
    So, in regards to towing, our trailer hitch here has a class three rating. That’s gonna provide us with a 7,500 pound gross trailer weight rating. That’s the amount we can pull outward on our receiver tube. Now keep in mind, these capacities are for the hitch only, the vehicle is rated separately. So, we need to abide by the lower of the two rated components, whether that’s the vehicle or the hitch.\r
    \r
    The vehicle capacities can be found in your owner’s manual. I would also like to point out that, if we wanna use a weight distribution system, this trailer hitch is rated for this. So, you’ll be happy to know that, because of the larger two inch by two inch receiver tube opening, we’re gonna have plenty of bike rack and cargo carrier options to choose from. Make sure you check out our selection here at etrailer. So, if we take a closer look at the receiver tube, on the side here, we’re gonna get our industry standard 5/8 inch diameter hitch pin hole.\r
    \r
    That’s gonna accept a standard 5/8 inch diameter hitch pin-and-clip. Keep in mind, these are gonna be sold separately, most bike racks and cargo carriers, however, do come with their own. You have plenty to choose from here at etrailer, as well, along with some locking options. Now, tucked back behind here a little bit more, we’re gonna have our safety chain loops. Those are gonna accept both the larger clevis style hooks, as well as the smaller S-type hooks. So, now I have a couple of measurements for you here. They’re gonna help you when you’re selecting your hitch-mounted accessories. The first one is gonna be the distance from the ground to the top inside edge of the receiver tube. That’s gonna be useful when you’re selecting your ball mount, so you can make sure you get the correct rise and drop to tow your trailer level. So, this one’s gonna be about 19 3/4. And then finally, we have the distance from the center of the hitch pin hole to the outside edge of the bumper. That’ll be useful when you’re selecting your folding accessories, such as a bike rack or cargo carrier. That way you can make sure that while those accessories are in the folded position, that they don’t contact the vehicle. And this one here, is gonna be right about three inches. So, in regards to installation, this one’s pretty straightforward. It’s definitely something I think you guys can do at home by yourselves. Keep in mind, we do have to remove the rear bumper. I know that may sound like a daunting task, but it’s actually not that hard at all. And we can walk you through the entire process step by step now. So to start off our installation here, we’re gonna be coming to either side of the vehicle. We’re over here on the driver’s side, just as a point of reference for you guys. So, we’re gonna be coming directly in our wheel well here, so directly behind our rear wheel. So, we’re gonna be focusing on the fasteners inside here. So, to start off, we’re gonna take an eight millimeter socket, and you’re gonna have one bolt at the very bottom here. We’re gonna go ahead and remove that. Once we get that one out, we’re gonna take a 3/16 inch drill bit, and we’re gonna have two plastic rivets. We have one down here, one up here. We’re gonna remove these both by drilling out the center of them with our drill bit. So, it’s kinda hard to get the drill into this area here, so you will have to go in at an angle. Now, they don’t alw
Xem Thêm  Mã HTML của Công cụ Tìm kiếm cho Trang web - cách tạo công cụ tìm kiếm trong html

Thiết lập Font trong HTML, Thẻ font trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 5933 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập Font trong HTML, Thẻ font trong HTML. Các font đóng vai trò trong việc tạo ra một Website thân thiện với người sử dụng, giúp họ dễ theo dõi nội dung hơn.

Cách áp dụng phông chữ toàn cầu cho toàn bộ tài liệu HTML

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 5357 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn sẽ có thể sử dụng dấu hoa thị và !importantcác yếu tố trong CSS. html…

Bài 10: Cách sử dụng font trong html và css

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 3252 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu cách sử dụng font trong html và css. Có hai dùng font là tải về, dủng trực tiếp trong mã nguồn. Cách thứ hai là dùng google font.

Sử dụng Web Font trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 5368 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Web font là font chữ được các nhà thiết kế website đưa lên host của website, không cần cài đặt vào máy tính của người dùng.

Những font chữ dùng trong thiết kế website

  • Tác giả: webkhoinghiep.com.vn
  • Đánh giá: 3 ⭐ ( 8238 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ✅ Hiện nay có rất nhiều font chữ, tuy nhiên trong thiết kế website chỉ có thể sử dụng được một vài font, vì các font đó tương thích với tiếng Việt.

làm thế nào để sử dụng phông chữ tuyệt vời trong css riêng?

  • Tác giả: vi.dpbhouse.com
  • Đánh giá: 3 ⭐ ( 8591 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang sử dụng bootstrap và Font Awesome. Trong một lớp css tùy chỉnh mà tôi đang làm việc, tôi đã cố gắng bao gồm các biểu tượng Font Awesome thay vì sử dụng hình ảnh. Đây là mã của tôi trước khi có Font Awesome. .data .close {disp …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình