Nội dung
Bạn đang muốn thêm icon (là biểu tượng, ở bài viết mình sẽ gọi là icon nhé) vào các nội dung trên trang web WordPress của mình? Không chỉ thêm Icon dạng hình ảnh, hướng dẫn dưới đây còn cho phép bạn thêm các icon dạng vector (bạn có thể tùy chỉnh thay đổi kích thước) mà không lo về vấn đề gây chậm trang web của mình. Các icon này được tải như phông chữ trên web và có thể được tạo kiểu bằng CSS.
Font Icon là gì và tại sao bạn nên sử dụng chúng?
Font Icon chứa các ký hiệu hoặc chữ tượng hình thay vì chữ và số. Những chữ tượng hình này có thể dễ dàng thêm vào nội dung trang web và thay đổi kích thước bằng CSS. So với các icon dạng hình ảnh, các icon dạng vector giúp trang web của bạn tải nhanh hơn nhiều.
Font icon có thể được sử dụng để hiển thị các biểu tượng thường được sử dụng. Ví dụ: bạn có thể sử dụng chúng với để hiển thị biểu tượng giỏ hàng, nút tải xuống, các tính năng như cuộc gọi, nhắn tin, email, địa chỉ,… trong trang web WordPress thay vì dạng văn bản giúp hiển thị gọn hơn, tiết kiệm không gian hơn.
Một số font icon cho phép người dùng sử dụng miễn phí và cung cấp nguồn mở có sẵn hàng trăm biểu tượng đẹp.
Trong thực tế, mỗi khi cài đặt mã nguồn mở WordPress sẽ đi kèm với bộ font icon dashicons miễn phí. Các icon này được sử dụng trong menu quản trị WordPress và các khu vực khác trong khu vực quản trị WordPress.
Để đúng hơn với mục đích của hướng dẫn này, chúng tôi sẽ sử dụng Font Awesome. Đây là font icon nguồn mở và miễn phí phổ biến nhất hiện nay. Ngoài ra bạn có thể tham khảo sử dụng thêm FontAwgie,…
Thêm Font Icon trong WordPress bằng cách sử dụng plugin
Nếu bạn là người dùng mới chưa quen với WordPress nhiều và đang cố gắng thêm một số biểu tượng vào bài đăng hoặc trang của mình, thì phương pháp này sẽ rất phù hợp với bạn. (Bạn sẽ không cần phải sửa đổi các tệp mã code).
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Font Awesome cho WordPress.
Khi kích hoạt, plugin cho phép Font Awesome hỗ trợ cho theme bạn đang sử dụng. Bây giờ bạn có thể chỉnh sửa bất kỳ bài đăng hoặc trang trên website WordPress của mình và bạn cũng có thể sử dụng shortcode để hiển thị icon như thế này:
[icon name=”rocket”]
Sau khi thêm, bạn có thể xem trước bài đăng hoặc trang của mình để xem biểu tượng sẽ trông như thế nào trên một trang web trước khi xuất bản.
Bạn cũng có thể tự thêm shortcode icon bên trong một block paragraph, nơi bạn có thể sử dụng cài đặt khối để tăng kích thước biểu tượng.
Khi bạn tăng kích thước văn bản, bạn sẽ không thể thấy trực tiếp icon hiển thị như thế nào. Bởi shortcode không tự động thay đổi thành các biểu tượng bên trong trình chỉnh sửa khối.
Bạn cần nhấp vào xem trước trên bài đăng hoặc trang của bạn để xem kích thước biểu tượng thực tế trông như thế nào trước khi xuất bản/cập nhật bài viết.
Bạn cũng có thể sử dụng shortcode biểu tượng bên trong các cột và tạo các khối tính năng như thế này:
2. Sử dụng font icon với Trình tạo trang trong WordPress
Đa số các plugin thiết kế trang WordPress phổ biến hiện nay đều có hỗ trợ tích hợp font icon. Điều này cho phép bạn dễ dàng sử dụng font icon trong các trang đích cũng như các khu vực khác trên trang web của bạn.
Beaver Builder
Beaver Builder là một trong những plugin thiết kế trang WordPress tốt nhất trên thị trường. Plugin này cho phép bạn dễ dàng tạo/thiết kế bố cục trang trong WordPress.
Beaver Builder đi kèm với các icon có sẵn và khá đẹp, để sử dụng bạn chỉ cần kéo và thả vào bài đăng/trang.
Bạn có thể tạo các nhóm icon, thêm một biểu tượng và di chuyển chúng vào các hàng và cột đã được tạo bố cục trước đó. Bạn cũng có thể chọn màu sắc cho icon, màu nền, khoảng cách và căn lề theo ý thích mà không cần viết CSS.
Elementor Pro
Elementor là một plugin thiết kế trang WordPress phổ biến khác. Plugin này cũng cho phép bạn sử dụng font icon, ngoài ra bạn cũng có thể sử dụng bộ icon có sẵn của Elementor.
Bạn có thể kéo và thả một biểu tượng ở bất cứ đâu trên bố cục đã thiết kế của mình. Các trình tạo trang phổ biến khác mà bạn có thể tham khảo như Divi và Visual Composer cũng hỗ trợ đầy đủ Font Icon.
3. Thêm font icon trong WordPress thủ công với mã code
Như nói trước đó, font icon cũng như phông chữ và có thể được thêm vào trang web của bạn giống như thêm bất kỳ phông chữ. Một số font icon như Font Awesome, có sẵn trên các máy chủ CDN và có thể được liên kết trực tiếp từ WordPress theme của bạn.
Bạn cũng có thể tải lên toàn bộ thư mục phông chữ vào một thư mục trên trang WordPress của bạn và sau đó sử dụng các phông chữ đó.
Dưới đây, chúng tôi sẽ hướng dẫn bạn thêm Font Awesome bằng cả hai phương pháp.
Cách 1:
Phương pháp thủ công (cách này khá đơn giản).
Trước tiên, bạn cần truy cập trang web Font Awesome và nhập địa chỉ email của bạn để lấy mã nhúng.
Bây giờ hãy kiểm tra email đến để nhận mã nhúng từ Font Awesome. Sao chép và dán mã nhúng này vào tệp header.php của WordPress Theme trước thẻ </head>.
Mã nhúng này sẽ là một dòng duy nhất sẽ tìm nạp thư viện Font Awesome trực tiếp từ các máy chủ CDN. Mã nhúng này sẽ trông giống như thế này:
|
1
|
<script src="https://use.fontawesome.com/123456abc.js"></script> |
Phương pháp này đơn giản, tuy nhiên cách này có thể gây ra một số xung đột với các plugin khác.
Để tích hợp tốt hơn bạn nên sử dụng cơ chế enqueueing để tích hợp. Thay vì liên kết đến các stylesheet từ mẫu header của WordPress Theme, bạn có thể thêm đoạn mã sau vào file functions.php trong WordPress theme hoặc trong một plugin cụ thể của trang web.
|
1
2
3
4
5
6
7
|
function wpb_load_fa() {wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );}add_action( 'wp_enqueue_scripts', 'wpb_load_fa' ); |
Cách 2:
Phương pháp thứ hai sẽ hơi phức tạp một chút, nhưng nó sẽ cho phép bạn lưu trữ các phông chữ biểu tượng Font Awesome trên trang web của mình.
Trước tiên, bạn cần truy cập trang web Font Awesome để tải gói phông chữ về máy tính.
Bây giờ, bạn sẽ cần kết nối với hosting lưu trữ trang web WordPress của mình bằng ứng dụng khách FTP và truy cập thư mục WordPress Theme.
Bạn cần tạo một thư mục mới ở đây và đặt tên là fonts. Tiếp theo, bạn cần tải lên tất cả các file trong file vừa tải về từ trang web Font Awesome (nhớ giải nén file này ra nhé).
Sau khi tải lên xong, chỉ cần bạn thêm mã này vào file functions.php của WordPress theme.
|
1
2
3
4
5
6
7
|
function wpb_load_fa() {wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );}add_action( 'wp_enqueue_scripts', 'wpb_load_fa' ); |
Như vậy bạn đã tải lên thành công bộ icon của Font Awesome vào WordPress theme của mình.
Hiển thị thủ công các Font Icon trong WordPress
Để xem các icon đầy đủ bạn có thể truy cập tới trang web của Font Awesome khi đó bạn sẽ dễ dàng xem và tìm được icon phù hợp hơn để sử dụng.
Sao chép tên biểu tượng và sử dụng như thế này trong WordPress.
|
1
|
<i class="fa-arrow-alt-circle-up"></i> |
Bạn có thể tạo style riêng cho biểu tượng này trong stylesheet của theme như sau:
|
1
2
3
4
|
.fa-arrow-alt-circle-up { font-size:50px; color:#FF6600; } |
Bạn cũng có thể kết hợp các biểu tượng khác nhau lại với nhau và tạo style cho chúng cùng một lúc. Ví dụ: giả sử bạn muốn hiển thị danh sách các liên kết có biểu tượng bên cạnh. Bạn có thể sử dụng thẻ <div></div> với một class như sau.
|
1
2
3
4
5
6
|
<div class="icons-group"> <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a> <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a> <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a> <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a></div> |
Bây giờ bạn có thể tạo style riêng cho chúng trong stylesheet của theme như sau:
|
1
2
3
4
5
6
7
|
.icons-group-item i { color: #333; font-size: 50px; } .icons-group-item i:hover { color: #FF6600} |
Chúng tôi hy vọng với bài viết này đã có thể giúp bạn dễ dàng trong quá trình tìm hiểu về WordPress và một phần nào đó cho nhu cầu của bạn, nếu có bất cứ thắc mắc nào bạn có thể để lại bình luận cho chúng tôi để được hỗ trợ thêm nhé!
