Bạn đã nghe qua về icon font và rất muốn sử dụng chúng trên trang WordPress của mình? Gần đây, một vài độc giả của chúng tôi đã đặt ra những câu hỏi tương tự như vậy. Hãy cùng tìm hiểu cách làm thế nào để đưa icon font vào theme WordPress một cách dễ dàng nhất nhé.
Icon font cho phép bạn sử dụng icon dưới dạng các hình ảnh vector (có thể thay đổi kích thước mà không vỡ hình) mà không làm ảnh hưởng đáng kể đến tốc độ tải trang. Chúng được trình duyệt coi như một bộ phông chữ và có thể được tùy biến bằng CSS.
Trong bài viết này, chúng tôi sẽ trình bày chi tiết cách nhanh và dễ dàng nhất để sử dụng icon font trong theme WordPress bạn đang dùng.
Icon font là gì và tại sao bạn nên sử dụng chúng?
Icon font là một bộ font chứa các ký hiệu hoặc icon thay vì các chữ và số thông thường. Những chữ tượng hình này có thể dễ dàng sử dụng trong phần content của trang web và thay đổi kích thước bằng CSS. So với việc sử dụng hình ảnh bitmap thông thường (JPG, PNG,…), các icon font giúp cải thiện tổng thể tốc độ trang WordPress của bạn mà vẫn đảm bảo chất lượng nội dung.
Icon font 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 giỏ hàng , nút download, contest/ giveaway và thậm chí trong menu điều hướng của WordPress .
Trên internet hiện đang tồn tại nhiều bộ icon font miễn phí và nguồn mở với hàng trăm biểu tượng đẹp.
Trên thực tế, WordPress sau khi cài đặt đã có sẵn bộ dashicons miễn phí, được sử dụng trong menu admin của WordPress và một số khu vực khác của trang quản trị WordPress wp-admin.
Một số icon font phổ biến khác ngoài dashicons:
- Font Awesome
- Genericons
- IcoMoon
- Linearicons
- Material Icons by Google
- The Noun Project
Để minh họa cho bài hướng dẫn này, chúng tôi sẽ sử dụng Font Awesome. Đây là bộ icon font nguồn mở và miễn phí phổ biến nhất hiện có. Hiện tại CunghocWP cũng đang sử dụng Font Awesome cùng các plugin WordPress phổ biến của họ như OptinMonster , WPForms , RaffPress , v.v.
Trong hướng dẫn này, chúng tôi sẽ đề cập đến ba cách tích hợp bộ icon font vào WordPress. Bạn có thể chọn một trong ba giải pháp miễn sao phù hợp nhất với trang WordPress đang chạy.
Tích hợp icon font vào WordPress bằng cách sử dụng plugin
Phương pháp này phù hợp với những người dùng mới làm quen, chỉ muốn thêm một vài biểu tượng hoặc icon vào bài đăng hoặc một page nào đó. Bạn sẽ không phải sửa đổi các file mã nguồn của theme mà vẫn có thể sử dụng icon font ở mọi nơi mình muốn.
Đ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. Nếu bạn chưa biết làm điều này, hãy xem hướng dẫn chi tiết của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, plugin sẽ cho phép bạn sử dụng Font Awesome trên trang WordPress của mình. Bây giờ bạn có thể chỉnh sửa bất kỳ bài đăng hoặc trang WordPress nào và sử dụng shortcode như thế này để hiển thị icon:
[icon name=”rocket”]
Bạn có thể hiển thị icon bằng cách này trong một đoạn văn bản khác hoặc trong một block shortcode riêng chỉ có mình nó .
Sau khi đã được thêm vào bài đăng, hãy nhấn xem trước để xem thử icon này hiển thị ra sao với người truy cập vào trang web của bạn. Trên trang thử nghiệm của chúng tôi, nó sẽ trông như thế này :
Bạn cũng có thể sử dụng shortcode cho icon font trong một block text như bình thường, sau đó chỉnh kích thước của nó bằng bảng block settings.
Do shortcode này không tự động chuyển thành icon trong trình soạn thảo của WordPress, khi tăng kích thước font lên trông nó sẽ hơi lạ một chút.
Bạn sẽ cần click vào nút “Preview” hoặc “Xem thử” để xem icon của mình hiển thị đến người dùng với kích thước to đến mức nào. Ở ví dụ trên, icon sẽ hiển thị như sau :
Bạn cũng có thể sử dụng shortcode của plugin Font Awesome trong các trang đã được bố trí sẵn thành dạng cột để tạo các biểu tượng lớn như thế này :
2. Sử dụng Icon font với WordPress Page Builder
Các plugin WordPress Page Builder phổ biến nhất đều có hỗ trợ sẵn cho icon font. Điều này cho phép bạn dễ dàng sử dụng icon trong các trang, bài đăng cũng như các khu vực khác trên trang web của mình.
Beaver Builder
Beaver Builder là plugin WordPress Page Builder tốt nhất trên thị trường. Plugin cho phép bạn dễ dàng tạo bố cục trang trong WordPress mà không cần viết bất kỳ dòng code nào.
Beaver Builder đi kèm với các icon đẹp và nhiều module có sẵn, bạn chỉ cần kéo và thả vào bài post và trang của mình.
Bạn có thể tạo các nhóm icon, thêm một vài biểu tượng và kéo thả chúng vào các hàng và cột có sẵn. Bạn cũng có thể chọn màu sắc, ảnh hoặc màu nền, khoảng cách và lề mà không cần viết CSS.
Bạn thậm chí có thể tạo các theme WordPress mới hoàn toàn mà không cần viết bất kỳ dòng code nào bằng sản phẩm mới của Beaver Builder : Themer.
Elementor Pro
Elementor là một plugin WordPress Page Builder phổ biến khác. Plugin đi kèm với một số element cho phép bạn sử dụng icon font, bao gồm cả element có tên Icon.
Bạn chỉ cần kéo và thả một biểu tượng vào bất cứ đâu và bố trí nó trong các hàng, cột và bảng có sẵn để tạo các bố cục trang theo ý muốn của mình.
Các trình Page Builder phổ biến khác như Divi và Visual Composer cũng hỗ trợ đầy đủ cho các icon font.
3. Thêm icon font trong WordPress bằng cách chỉnh sửa mã nguồn
Như chúng tôi đã đề cập trước đó, icon font về bản chất chỉ là một phông chữ và có thể được thêm vào trang web của bạn giống như bất kỳ phông chữ nào khác.
Một số icon font phổ biến như Font Awesome, được hỗ trợ lưu trữ trên nhiều dịch vụ CDN trên khắp thế giới và có thể dễ dàng chèn thêm vào theme WordPress bạn đang dùng.
Bạn cũng có thể upload toàn bộ thư mục icon font lên server đang dùng và sau đó chèn link vào CSS stylesheet.
Chúng tôi sẽ minh họa cho hướng dẫn này, sử dụng Font Awesome bằng cả hai phương pháp.
Cách 1:
Phương pháp thủ công này thực hiện khá đơn giản.
Trước tiên, bạn cần truy cập trang web của Font Awesome và nhập địa chỉ email của bạn để lấy embed code.
Bây giờ hãy kiểm tra hộp thư đến của bạn, xem email từ Font Awesome để lấy embed code. Sao chép và dán embed code này vào tệp header.php của theme WordPress của bạn ngay trước thẻ </head>thẻ.
Embed code của bạn sẽ là một dòng code duy nhất sẽ trỏ tới thư viện Font Awesome trực tiếp từ các máy chủ CDN. Nó sẽ trông như thế này:
<script src="https://use.fontawesome.com/123456abc.js"></script>Phương pháp này đơn giản nhất, nhưng có thể gây ra xung đột với các plugin khác.
Một cách tiếp cận tốt hơn sẽ là load JavaScript trong WordPress bằng cách sử dụng cơ chế enqueue có sẵn.
Thay vì trỏ đến các file css từ file header template của theme, bạn có thể thêm đoạn mã sau vào file functions.php, hoặc vào một plugin nào đó.
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 không phải là cách đơn giản nhất, song nó sẽ cho phép bạn trỏ đến bộ icon font được lưu trữ trên chính website 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.
Đơn giản chỉ cần tải về các icon font và giải nén chúng.
Sau đó, bạn sẽ cần kết nối với hosting WordPress của mình bằng một FTP client và truy cập thư mục của theme WordPress đang sử dụng.
Hãy tạo một thư mục mới ở đó và đặt tên là fonts. Sau đó, bạn cần upload nội dung của thư mục icon font vừa giải nén vào thư mục fonts trên hosting.
Công đoạn chuẩn bị đã hoàn tất, giờ bạn chỉ cần thêm đoạn mã sau vào file functions.php của theme đang dùng, hoặc một plugin nào đó :
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' );Chúc mừng, giờ thì bạn đã tích hợp thành công Font Awesome vào theme WordPress đang dùng.
Công việc tiếp theo là thêm các icon font vào website của mình mà thôi!
Thêm icon font một cách thủ công vàoWordPress
Truy cập trang web của Font Awesome, bạn sẽ thấy danh sách đầy đủ các biểu tượng. Bạn có thể nhấp vào một biểu tượng bất kỳ và tên của nó sẽ hiện ra ngay lập tức.
Để sử dụng một biểu tượng, bạn copy tên của nó và chèn vào WordPress như sau :
<i class="fa-arrow-alt-circle-up"></i> Bạn có thể chỉnh lại cách hiển thị của biểu tượng này bằng CSS như sau :
.fa-arrow-alt-circle-up {
font-size:50px;
color:#FF6600;
}Bạn cũng có thể kết hợp nhiều biểu tượng khác nhau và viết CSS cho tất cả chúng cùng một lúc. Ví dụ, bây giờ bạn muốn hiển thị một danh sách các link kèm với icon bên cạnh mỗi link. Bạn hãy đặt chúng bên trong một thẻ <div> và đặt cho nó một tên class, ví dụ icons-group.
<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>Mã CSS cho danh sách icon sẽ giống như thế này :
.icons-group-item i {color: #333;font-size: 50px;}.icons-group-item i:hover {color: #FF6600}Chúng tôi hy vọng bài viết này đã giúp bạn tìm được cách để dễ dàng sử dụng icon font trên WordPress. Ngoài ra, bạn có lẽ sẽ muốn xem thêm bài viết của chúng tôi hướng dẫn chi tiết cách thêm icon hình ảnh vào menu điều hướng của WordPress.
