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

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 : biểu tượng phông chữ tuyệt vời 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  Kí Tự Dấu Cách Đặc Biệt ❤️️ Ký Tự Khoảng Cách Ẩn Ko Tên - chèn icon vào word

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  Cách liệt kê tất cả các trình nghe sự kiện đang hoạt động trên một trang Web - danh sách trình nghe sự kiện javascript


Xem thêm những thông tin liên quan đến chủ đề phông chữ biểu tượng tuyệt vời html

How to Add Font Awesome Icons in HTML and CSS

alt

  • Tác giả: Waatz Developer
  • Ngày đăng: 2021-11-11
  • Đánh giá: 4 ⭐ ( 7332 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How to add Font Awesome icons to your project in HTML and CSS.

    You can also customize your icons with color and sizes using CSS.

    In this tutorial, we use the free icons from Font Awesome.

    Join Waatz Developer Discord server here: https://discord.gg/9Xsk69vGDX

    business inquiries: waatzdeveloper@gmail.com

Sử dụng biểu tượng Phông chữ tuyệt vời làm nội dung CSS

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 5325 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cập nhật cho FontAwgie 5 Cảm ơn Aurelien Bạn cần thay đổi font-familythành Font Awesome 5…

Các font chữ Đẹp trong html, chọn font chữ Đẹp cho website

  • Tác giả: jdomain.vn
  • Đánh giá: 4 ⭐ ( 7888 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng tôi sẽ đem đến cho bạn 20 web font HTML tốt nhất cho trang web, Nếu dùng một trong số đó, bạn sẽ cải thiện đáng kể thiết kế cũng như sự dễ đọc của trang web

CSS Icon: Thư viện biểu tượng CSS dành cho thiết kế giao diện

  • Tác giả: nhatphuc.com
  • Đánh giá: 5 ⭐ ( 6036 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhà thiết kế Adobe Wenting Zhang đã tạo ra một ứng dụng web có tên CSS Icon để tạo các biểu tượng CSS gốc.

Phông chữ tuyệt vời – Biểu tượng giao thông

  • Tác giả: isolution.pro
  • Đánh giá: 3 ⭐ ( 5523 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chương này giải thích cách sử dụng các biểu tượng Phông chữ Vận chuyển Tuyệt vời. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

Symbol – Biểu tượng trong HTML

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 8544 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML có nhiều biểu tượng toán học, kỹ thuật, tiền tệ không thể dùng bàn phím bình thường để viết được.

Phông chữ Biểu tượng: Ưu và Nhược điểm của Phông chữ Tuyệt vời • TechLila

  • Tác giả: techlila.com
  • Đánh giá: 5 ⭐ ( 1980 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Font Awesome hiện là một trong những phông chữ biểu tượng tốt nhất có sẵn cho các nhà phát triển và mục đích sử dụng cá nhân. Nó tránh một số vấn đề của phông chữ biểu tượng thông thường.

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

Xem Thêm  Sử dụng CSS :: trước và :: sau cho các lớp phủ hình ảnh đơn giản, sâu sắc - css sau hình nền