Cách sử dụng biểu tượng phông chữ tuyệt vời trong HTML – cách thêm các biểu tượng phông chữ tuyệt vời trong 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 : cách thêm biểu tượ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  SQL JOIN dành cho người mới bắt đầu - cách tham gia sql

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ác ví dụ về trình đơn thả xuống HTML và CSS mà bạn có thể sử dụng - menu thả xuống trong html css


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

How to Add Icons on HTML Website? | Styling Icons with CSS | Flaticon & Font Awesome Icons 2021

alt

  • Tác giả: Cem Eygi Media
  • Ngày đăng: 2021-09-10
  • Đánh giá: 4 ⭐ ( 1853 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn how to add icons on HTML Websites. In this video, you’re going to learn 2 different icon libraries such as the font awesome and the flaticon libraries, how to add & style icons by using these libraries.

    Flaticon Library: https://www.flaticon.com/
    Font Awesome Library: https://fontawesome.com

    SECTIONS:
    (00:00) –  INTRO
    (00:40) – The Flaticon Library
    (02:30) – Adding Icons of Flaticon
    (03:52) – Font Awesome Installation
    (05:06) – Adding Font Awesome Icons
    (06:32) – Styling the Icons

    Credits: (Flaticon Library)
    – Icons made by “https://www.flaticon.com/authors/pixel-perfect” Pixel perfect from https://www.flaticon.com
    – Icons made by “https://www.freepik.com” Freepik from https://www.flaticon.com

    ——————————– FOLLOW ME ON SOCIAL MEDIA ————————————

    Instagram: https://www.instagram.com/cemeygimedia/
    Facebook Private Group: https://www.facebook.com/groups/cemeygimedia
    Twitter: https://twitter.com/cem_eygi – (@cem_eygi)
    Join My Email List: https://bit.ly/2KXEBsv

    fontawesome flaticon htmlcss

20 web font HTML tốt nhất năm 2022

  • Tác giả: www.hostinger.vn
  • Đánh giá: 4 ⭐ ( 3229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Web Font HTML đóng vai trò lớn trong việc hiển thị website. Trong bài này, chúng tôi sẽ giới thiệu cho bạn 20 font an toàn nhất!

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

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 7264 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á: 3 ⭐ ( 3896 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.

Bài 14: CSS Icons (Thêm biểu tượng vào trang)

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 8762 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thêm 1 biểu tượng vào trang html sử dụng CSS

Cách thêm font chữ vào website

  • Tác giả: netweb.vn
  • Đánh giá: 5 ⭐ ( 5851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cập nhập: 31/03/2021 – ở bài viết này netweb sẽ hướng dẫn các bạn cách thêm font chữ vào website của bạn nhé! hihi

Định dạng chữ trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 2195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng các thẻ định dạng trong HTML.

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  JavaScript toLowerCase () - Cách chuyển một chuỗi thành chữ thường và chữ hoa trong JS - thành chữ thường js