Menu
×

Được chứng nhận

Ghi lại kiến ​​thức của bạn

Đăng nhập Đăng ký

Tạo Tài khoản Example.com.vn miễn phí để cải thiện trải nghiệm học tập của bạn

Người tìm đường và việc học của tôi

Theo dõi tiến độ học tập của bạn tại Example.com.vn và thu thập phần thưởng

Nâng cấp

Trở thành người dùng PLUS và mở khóa các tính năng mạnh mẽ (không có quảng cáo, lưu trữ, hỗ trợ, ..)

Bắt đầu từ đâu

Bạn không chắc chắn muốn bắt đầu từ đâu? Đi theo con đường được hướng dẫn của chúng tôi

Trình chỉnh sửa mã (Dùng thử)

Với trình chỉnh sửa mã trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã và xem kết quả trong trình duyệt của mình

Video

Tìm hiểu những điều cơ bản về HTML qua video hướng dẫn thú vị và hấp dẫn

Mẫu

Chúng tôi đã tạo một loạt mẫu trang web đáp ứng mà bạn có thể sử dụng - miễn phí!

Web hosting

Lưu trữ trang web của riêng bạn và chia sẻ nó với mọi người với Example.com.vn Spaces

Tạo một máy chủ

Tạo máy chủ của riêng bạn bằng Python, PHP, React.js, Node.js, Java, C#, v.v.

Làm thế nào để

Bộ sưu tập lớn các đoạn mã cho HTML, CSS và JavaScript

Khung CSS

Xây dựng các trang web nhanh và phản hồi bằng cách sử dụng khung W3.CSS miễn phí của chúng tôi

Thống kê trình duyệt

Đọc xu hướng dài hạn của việc sử dụng trình duyệt

Tốc độ gõ

Kiểm tra tốc độ đánh máy của bạn

Đào tạo AWS

Tìm hiểu dịch vụ web của Amazon

Bộ chọn màu

Sử dụng công cụ chọn màu của chúng tôi để tìm các màu RGB, HEX và HSL khác nhau. Bánh xe màu hình tròn thể hiện sự chuyển màu trong quang phổ

Trò chơi mã

Trò chơi mã hóa W3Schools! Giúp linh miêu thu thập nón thông Logo Lynx

Đặt mục tiêu

Nhận hành trình học tập được cá nhân hóa dựa trên các kỹ năng và mục tiêu hiện tại của bạn

Bản tin

Tham gia bản tin của chúng tôi và có quyền truy cập vào nội dung độc quyền mỗi tháng

Việc làm

Thuê những tài năng công nghệ hàng đầu. Hợp lý hóa quy trình tuyển dụng của bạn để có đội ngũ phù hợp hoàn hảo

Lớp học

Hãy liên hệ để sử dụng Example.com.vn Plus và các chứng chỉ với tư cách là một tổ chức giáo dục

×
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP CÁCH W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS AN NINH MẠNG DỮ LIỆU KHOA HỌC

Hướng dẫn biểu tượng

Biểu tượng TRANG CHỦ Biểu tượng Tham khảo

Phông chữ tuyệt vời 5

Phông chữ Tuyệt vời 5 Biểu tượng giới thiệu Biểu tượng truy cập Biểu tượng cảnh báo Động vật Biểu tượng Biểu tượng Mũi tên Biểu tượng Âm thanh & Video Biểu tượng ô tô Biểu tượng mùa thu Biểu tượng đồ uống Thương hiệu Biểu tượng Tòa nhà Biểu tượng Kinh doanh Biểu tượng Cắm trại Biểu tượng Từ thiện Biểu tượng Trò chuyện Biểu tượng Cờ vua Biểu tượng Tuổi thơ Biểu tượng Quần áo Biểu tượng Mã Biểu tượng Truyền thông Biểu tượng Máy tính Biểu tượng Xây dựng Biểu tượng Tiền tệ Biểu tượng Ngày & Giờ Biểu tượng Biểu tượng Thiết kế Biểu tượng Biên tập Biểu tượng Giáo dục Biểu tượng Emoji Biểu tượng Năng lượng Biểu tượng Tập tin Biểu tượng Biểu tượng Tài chính Biểu tượng Thể dục Biểu tượng Thực phẩm Biểu tượng Trái cây & Rau quả Biểu tượng Trò chơi Biểu tượng Giới tính Biểu tượng Halloween Biểu tượng Bàn tay Biểu tượng Sức khỏe Biểu tượng Kỳ nghỉ Biểu tượng Khách sạn Biểu tượng Hộ gia đình Biểu tượng Hình ảnh Biểu tượng Giao diện Biểu tượng Hậu cần Biểu tượng Bản đồ Biểu tượng Biểu tượng Hàng hải Biểu tượng Tiếp thị Biểu tượng Toán học Biểu tượng Y tế Biểu tượng Di chuyển Biểu tượng Âm nhạc Biểu tượng Đối tượng Biểu tượng Thanh toán & Mua sắm Biểu tượng Dược Biểu tượng Biểu tượng Chính trị Biểu tượng Tôn giáo Biểu tượng Khoa học Viễn tưởng Biểu tượng An ninh Biểu tượng Hình dạng Biểu tượng Mua sắm Biểu tượng Xã hội Biểu tượng Spinners Biểu tượng Biểu tượng Thể thao Biểu tượng Mùa xuân Biểu tượng Trạng thái Biểu tượng Mùa hè Trò chơi trên bàn Biểu tượng Chuyển đổi Biểu tượng Biểu tượng Du lịch Biểu tượng Người dùng & Con người Biểu tượng Xe cộ Biểu tượng Biểu tượng Thời tiết Biểu tượng Mùa đông Viết

Phông chữ tuyệt vời 4

Phông chữ Biểu tượng giới thiệu tuyệt vời Biểu tượng thương hiệu Biểu tượng biểu đồ Biểu tượng tiền tệ Biểu tượng định hướng Biểu tượng loại tệp Biểu tượng biểu tượng Biểu tượng giới tính Biểu tượng bàn tay Biểu tượng y tế Biểu tượng thanh toán Biểu tượng spinner Biểu tượng văn bản Biểu tượng vận chuyển Biểu tượng video Biểu tượng video Ứng dụng web

Khởi động

Biểu tượng BS Glyphicons

Google

Biểu tượng Google Biểu tượng giới thiệu Biểu tượng hành động Biểu tượng cảnh báo Biểu tượng AV Biểu tượng giao tiếp Biểu tượng nội dung Biểu tượng thiết bị Biểu tượng trình chỉnh sửa Biểu tượng tệp Biểu tượng phần cứng Biểu tượng hình ảnh Biểu tượng bản đồ Biểu tượng điều hướng Biểu tượng thông báo Biểu tượng địa điểm Biểu tượng xã hội Chuyển đổi


Giới thiệu Font Awesome 5


Phông chữ tuyệt vời 5

Font Awesome 5 có phiên bản PRO với 7842 biểu tượng và phiên bản MIỄN PHÍ với 1588 biểu tượng. Hướng dẫn này sẽ tập trung vào phiên bản MIỄN PHÍ.

Để sử dụng biểu tượng Free Font Awesome 5, bạn có thể chọn tải xuống thư viện Font Awesome hoặc có thể đăng ký tài khoản tại Font Awesome và nhận mã (gọi là KIT CODE) để sử dụng khi thêm Font Awesome vào web của mình trang.

Chúng tôi thích cách tiếp cận KIT CODE hơn. Sau khi nhận được mã, bạn có thể bắt đầu sử dụng Font Awesome trên các trang web của mình bằng cách chỉ đưa vào một dòng mã HTML:

<script src="https://kit.fontawesome.com/ yourcode .js" crossorigin="anonymous"></script>

Ví dụ

Chúng tôi đã nhận được mã a076d05399 và bằng cách chèn thẻ script, cùng với mã, chúng tôi có thể bắt đầu sử dụng Font Awesome:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-clock"></i>

</body>
</html>

Kết quả trong:

Hãy tự mình thử »

Lưu ý: Không cần tải xuống hoặc cài đặt!


Nhận MÃ BỘ SẢN PHẨM CỦA RIÊNG BẠN

Đăng ký và nhận mã riêng miễn phí tại:

fontawesome.com

Tính năng mới trong Phông chữ Tuyệt vời 5

Điểm mới trong Font Awesome 5 là tiền tố fas , Font Awesome 4 sử dụng fa .

Chữ s trong fas là viết tắt của Solid và một số biểu tượng cũng có chế độ thông thường , được chỉ định bằng cách sử dụng tiền tố far :

Ví dụ

<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>

Kết quả trong:

Hãy tự mình thử »

Font Awesome được thiết kế để sử dụng với các phần tử nội tuyến. Phần tử <i><span> được sử dụng rộng rãi cho các biểu tượng.

Cũng lưu ý rằng nếu bạn thay đổi kích thước phông chữ hoặc màu sắc của vùng chứa biểu tượng thì biểu tượng sẽ thay đổi. Điều tương tự cũng xảy ra với bóng và bất kỳ thứ gì khác được kế thừa bằng CSS.

Ví dụ

<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>

Kết quả trong:

Hãy tự mình thử »


Biểu tượng định cỡ

Các lớp fa-xs , fa-sm , fa-lg , fa-2x , fa-3x , fa-4x , fa-5x , fa-6x , fa-7x , fa-8x , fa-9x hoặc fa-10x được sử dụng để điều chỉnh kích thước biểu tượng tương ứng với vùng chứa của chúng.

Ví dụ

Đoạn mã sau:

<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>

Kết quả trong:

Hãy tự mình thử »

Danh sách biểu tượng

Các lớp fa-ulfa-li được sử dụng để thay thế các dấu đầu dòng mặc định trong danh sách không có thứ tự.

Ví dụ

Đoạn mã sau:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
  <li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>

Kết quả trong:

Hãy tự mình thử »

Biểu tượng hoạt hình

Lớp fa-spin có bất kỳ biểu tượng nào để xoay và lớp fa-pulse có bất kỳ biểu tượng nào để xoay với 8 bước.

Ví dụ

Đoạn mã sau:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>

Kết quả trong:

Hãy tự mình thử »

Lưu ý: IE8 và IE9 không hỗ trợ hoạt ảnh CSS3.


Biểu tượng xoay và lật

Các lớp fa-rotate-*fa-flip-* được sử dụng để xoay và lật các biểu tượng.

Ví dụ

Đoạn mã sau:

<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>

Kết quả trong:

Hãy tự mình thử »

Biểu tượng xếp chồng lên nhau

Để xếp chồng nhiều biểu tượng, hãy sử dụng lớp fa-stack trên biểu tượng mẹ, lớp fa-stack-1x cho biểu tượng có kích thước thông thường và fa-stack-2x cho biểu tượng lớn hơn.

Lớp fa-inverse có thể được sử dụng làm màu biểu tượng thay thế. Bạn cũng có thể thêm các lớp biểu tượng lớn hơn vào lớp biểu tượng gốc để kiểm soát kích thước hơn nữa.

Ví dụ

Đoạn mã sau:

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>

<span class="fa-stack fa-lg">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle (regular)<br>

<span class="fa-stack fa-lg">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera

Kết quả trong:

Hãy tự mình thử »

Biểu tượng có chiều rộng cố định

Cũng giống như các chữ cái và các ký tự khác, biểu tượng có thể có chiều rộng khác nhau và nếu bạn cần căn chỉnh các biểu tượng theo chiều dọc như trong danh sách hoặc menu thì đây có thể là một vấn đề.

Lớp fa-fw được sử dụng để đặt các biểu tượng ở độ rộng cố định.

Ví dụ

<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>

<p>Without Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon 3</div>

Kết quả trong:


Hãy tự mình thử »

Biểu tượng có viền và kéo

Các lớp fa-border , fa-pull-right hoặc fa-pull-left được sử dụng để kéo trích dẫn hoặc biểu tượng bài viết.

Ví dụ

Đoạn mã sau:

<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Kết quả trong:

Hãy tự mình thử »

×

Liên hệ bán hàng

Nếu bạn muốn sử dụng dịch vụ của Example.com.vn với tư cách là một tổ chức giáo dục, nhóm hoặc doanh nghiệp, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Báo cáo lỗi

Nếu bạn muốn báo cáo lỗi hoặc nếu bạn muốn đưa ra đề xuất, hãy gửi email cho chúng tôi:
[email được bảo vệ]

Example.com.vn được tối ưu hóa cho việc học tập và đào tạo. Các ví dụ có thể được đơn giản hóa để cải thiện khả năng đọc và học. Các hướng dẫn, tài liệu tham khảo và ví dụ liên tục được xem xét để tránh sai sót, nhưng chúng tôi không thể đảm bảo tính chính xác hoàn toàn của mọi nội dung. Khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng , chính sách cookie và quyền riêng tư của chúng tôi.

Bản quyền 1999-2024 của Refsnes Data. Đã đăng ký Bản quyền. Example.com.vn được cung cấp bởi W3.CSS .