Hướng Dẫn Thêm Font Awesome Vào Website Bằng After Before

Trang chủ » Thư Viện Font Awesome » Hướng Dẫn Thêm Font Awesome Vào Website Bằng After Before

Có thể bạn quan tâm

Home » Hướng Dẫn Thêm Font Awesome Vào Website Bằng After Before Hướng Dẫn Thêm Font Awesome Vào Website Bằng After Before Trần Thắng 25 Tháng 12 2019

Để giúp lập trình viên xây dựng Website đẹp và nhanh chóng đỡ mất nhiều thời gian để lấy các icon từ các file PSD ta sử dụng thư viện Font Awesome. Cùng xem chia sẻ của Ngọc Thắng về cách thêm Font Awesome Vào Website nhanh chóng và chính xác nhất nhé.

Font Awesome là một thư viện chứa font chữ ký hiệu(icon) thường xuyên được sử dụng để xây dựng Website.

Sử dụng Font Awesome giúp lập trình viên linh hoạt hơn trong quá trình xây dựng Website. Dưới đây là hướng dẫn chi tiết thêm Font Awesome.

  • Top 3 cách chuyển hướng Redirect trang bị lỗi 404 về trang chủ trong WordPress
  • Sơ đồ trang web – Hướng dẫn tạo sơ đồ trang web (Sitemap)
  • Jquery Là Gì? Ứng Dụng Của Jquery Trong Thiết Kế Website
  • HTML, CSS là gì? Tại Sao Nó Quan Trọng Với Website?
  • Sublime Text – Những Plugin Cài Vào Sublime Text Trong Web Developers

Thêm Font Awesome Vào Website

1. Cách sử dụng thư viện Font Awesome để xây dựng Website

Để áp dụng thư viện Font Awesome thì bạn phải download thư viện Font Awesome tại trang chủ và nhúng nó vào Layout hoặc bạn cũng có thể nhúng đường dẫn sau vào đầu thẻ <head> trong html :

<link href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”/>

Sau khi thêm bạn có thể vào thư viện Font Awesome để tìm các icon mà mình muốn thêm vào Website.

Để thêm các ký hiệu hình ảnh icon của thư viện Font Awesome vào đằng trước và đằng sau các thẻ HTML ta thường dùng hai thuộc tính là after và before, hai thuộc tính này thường xuyên được sử dụng để xử lý, xây dựng layout website.

2.  Cách sử dụng :after để thêm Font Awesome

– Để thêm nội dung vào sau 1 thẻ trong HTML ta dùng :after.

Ví dụ có đoạn HTML:

Vi-du-html Để thêm ký hiệu chỉ tay đằng sau câu “ Chào mừng bạn đến với Ngọc Thắng” thì trong file css ta làm như sau:

Them-vao-css

Kết quả sau khi thực hiện ta được :

ket-qua-sau-khi-thuc-hien-1

3. Cách sử dụng :before để thêm Font Awesome

– Để thêm nội dung vào trước 1 thẻ trong HTML ta dùng :after.

Ví dụ có đoạn HTML :

Them-vao-css

Tương tự như khi sử dụng :after để thêm ký hiệu chỉ tay đằng trước câu “ Chào mừng bạn đến với Ngọc Thắng” thì trong file css ta làm như sau:

Kết quả sau khi thực hiện ta được :

ket-qua-sau-khi-thuc-hien-2

Một số lưu ý khi sử dụng :after và :before

– Bạn sẽ không thể bôi đen các nội dung mà bạn thêm bằng :after và : before

– Ta có thể thêm các thuộc tính Css bình thường trên những nội dung mà ta thêm bằng :after và :before như trong ví dụ mình thêm padding để tạo khoảng cách giữa icon và nội dung thẻ <h2>

– Có bạn thắc mắc vì thấy có người dùng :before hoặc :: before. Hầu hết các trình duyệt đều sẽ hỗ trợ 1 dấu hai chấm hoặc là cả hai dấu hai chấm  cho cú pháp của CSS3 nhưng trên một số trình duyệt cũ như IE8 sẽ không hỗ trợ hai dấu hai chấm. Vì vậy nếu  các bạn code không tới tận IE8 thì bạn có thể dùng cả hai cách viết trên.

Trên đây là toàn bộ hướng dẫn chi tiết cách thêm Font Awesome Vào Website Bằng After Before. Nếu bạn đang còn vướng mắc trong quá trình thêm vào website; hãy để lại comment phía dưới bài viết bạn nhé. Đội ngũ Ngọc Thắng rất vui được giải đáp mọi thắc mắc giúp bạn.

3/5 - (2 bình chọn)

Trần Đức ThắngTrần Đức Thắng

Tôi là Trần Đức Thắng, hiện đang là CEO & Co-Founder của Công Ty Ngọc Thắng. Tôi phát triển với nền tảng thiết kế website, SEO và Inbound Marketing. Hiện nay Ngọc Thắng cung cấp dịch vụ thiết kế website, SEO, quảng cáo Google Ads… Với kinh nghiệm triển khai nhiều dự án những năm qua, đội ngũ của Ngọc Thắng không ngừng nỗ lực mang đến những dịch vụ tốt với chi phí thấp nhất cho quý khách hàng.!

" Ngọc Thắng đã tạo 1 group cộng đồng HỎI - ĐÁP về Thiết kế WEBSITE và SEO Wordpress để chia sẻ kinh nghiệm và học hỏi kiến thức. Mời bạn tham gia trao đổi kinh nghiệm, đặt câu hỏi để được các chuyên gia hỗ trợ miễn phí tại Group: " https://www.facebook.com/groups/hocthietkewebwp/ Click để tham gia group Số 7, Ngách 121/2, Trần Phú, Hà Đông, Hà Nội 1900 89 21 098 148 1368 [email protected]

Tin tức khác

Dịch Vụ Thiết Kế Website Hà Nội – Dự Án Thiết Kế Website Chuyên Nghiệp, Chuẩn SEO của Ngọc Thắng Tháng 10 27, 2025 SMTP Gmail là gì? Cách cấu hình WP Mail SMTP trong WordPress Tháng 1 11, 2021 Cách Chèn Messenger Vào Website WordPress Nhanh Chóng Đơn Giản Tháng 10 22, 2020 Thiết kế Logo – Banner – Video – Bộ nhận dạng thương hiệu Thiết kế Logo – Banner – Video – Bộ nhận dạng thương hiệu

Thiết kế Logo – Banner – Video Bộ nhận dạng thương hiệu – Ngọc Thắng với đội ngũ chuyên thiết kế Website giới thiệu công ty và bán hàng. Với kinh nghiệm nhiều năm trong lĩnh vực công nghệ thông...

Xem chi tiết Google AdWords – Facebook Ads Google AdWords – Facebook Ads

Công ty chạy quảng cáo Google AdWords – Facebook Ads || Cty Ngọc Thắng Để quảng cáo Google AdWords – Facebook Ads được hiệu quả: – Nội dung Fanpage, chủ đề được xây dựng trên Fanpage, lượng Like chất lượng...

Xem chi tiết Công Ty SEO Website Lên Top Google Uy Tín Tại Hà Nội Công Ty SEO Website Lên Top Google Uy Tín Tại Hà Nội

CÔNG TY SEO WEBSITE LÊN TOP GOOGLE UY TÍN TẠI HÀ NỘI SEO TOP từ khóa Là quá trình ảnh hưởng đến khả năng hiển thị của một trang web. Hoặc một trang web trong không lương một công cụ...

Xem chi tiết Thiết kế website Thiết kế website

Thiết kế website chuẩn seo tại Hà Nội – Với đa số suy nghĩ Thiết kế website hay phần mềm là một sản phẩm vô giá và không định lượng được giá trị. Tuy nhiên với Ngọc Thắng website luôn...

Xem chi tiết WordPress Hosting WordPress Hosting

WordPress Hosting là dịch vụ hosting chuyên biệt tối ưu dành riêng cho mã nguồn WordPress. Dịch vụ hosting được cài đặt sẵn WordPress và chịu sự quản lý của nhà cung cấp dịch vụ đó. Họ sẽ giúp các...

Xem chi tiết SSL SSL

SSL là viết tắt của từ Secure Sockets Layer, là tiêu chuẩn của công nghệ bảo mật, truyền thông mã hoá giữa máy chủ Web server và trình duyệt (browser). Tiêu chuẩn này hoạt động và đảm bảo rằng các...

Xem chi tiết Email Server Email Server

Email Server – hay còn gọi là Máy chủ thư điện tử là máy chủ dùng để gửi và nhận thư điện tử, là một giải pháp Email dành cho các doanh nghiệp để quản lý và truyền thống nội...

Xem chi tiết Đăng kí Tên miền – Domain uy tín tại Việt Nam Đăng kí Tên miền – Domain uy tín tại Việt Nam

Domain là gì ? Domain là định danh của website trên Internet. Và thường gắn kèm với tên công ty và thương hiệu của doanh nghiệp. Tên miền là duy nhất và được cấp phát cho chủ thể nào đăng...

Xem chi tiết Dịch vụ Cloud Hosting SSD chất lượng Dịch vụ Cloud Hosting SSD chất lượng

Dịch vụ Cloud Giúp vận hành service ổn định, tối ưu hiệu quả kinh doanh. Tất cả đều được dễ dàng quản lý từ bảng điều khiển: – Cân bằng tải – Bộ lưu trữ – Địa chỉ IP bổ...

Xem chi tiết Web Hosting Web Hosting

Web Hosting là không gian trên máy chủ có cài đặt các dịch vụ Internet như world wide web (www), truyền file(FTP), Mail….Bạn có thể chứa nội dung trang web hay dữ liệu trên không gian đó. Web Hosting đồng...

Xem chi tiết Quảng cáo trên top 10 Hà Nội

Tin tức

Dịch Vụ Thiết Kế Website Hà Nội – Dự Án...

Trong kỷ nguyên chuyển đổi số, việc sở hữu một...

bia-icardpro-1200x675 iCardPro.vn – Dự Án Card ID NFC Thông Minh Của...

Công ty TNHH Công nghệ và Truyền thông Ngọc Thắng:...

dich-vu-back-link TOP 5 lý do nên sử dụng dịch vụ backlink...

Backlink vẫn đóng vai trò quan trọng trong SEO website,...

Thùng carton đi máy bay Bao Bì Ba An – Phân Phối Sỉ Thùng Carton...

Trong bối cảnh nhu cầu đóng gói và vận chuyển...

Mua iphone 16 cũ giá rẻ Lý Do Nên Mua iPhone 16 Cũ: Giải Pháp Tiết...

iPhone luôn là một trong những dòng điện thoại được...

by Liên hệ Fanpage Nhận báo giá Thiết kế website Nhận báo giá SEO tổng thể Đọc thêm bài SEO
Đăng kí nhận báo giá

Δ

Hotline: 098 148 1368

Từ khóa » Thư Viện Font Awesome