Biểu tượng là một phần không thể thiếu của bất kỳ trang web nào. Chúng mang lại sự sống động cho trang của bạn và giúp khách truy cập hiểu rõ các phần khác nhau của trang web. Liên kết giỏ hàng của bạn, chỉ số tải xuống, mũi tên điều hướng và các mô tả văn bản đều sẽ trở nên khá tẻ nhạt mà không có chúng.
Với tầm quan trọng của biểu tượng, bạn mong muốn đảm bảo rằng trang web của mình có những biểu tượng thực sự tuyệt vời để tăng tính sử dụng và phong cách. Một trong những cách dễ dàng nhất để làm điều này là sử dụng một bộ biểu tượng.
Bạn đang xem: Thêm biểu tượng mới dễ dàng vào trang web WordPress của bạn
Contents
Lợi ích của việc sử dụng một bộ biểu tượng
Một bộ biểu tượng là một bộ sưu tập hình ảnh vector trong một tập hợp được tải và xử lý như một file font. Có nhiều lợi ích rõ ràng khi sử dụng một bộ biểu tượng trong biểu tượng hóa trang web của bạn so với việc sử dụng hình ảnh.
Lựa chọn:
Trước tiên, bạn có vô số các lựa chọn. Vô tận, không có đáy. Có hàng chục bộ biểu tượng có sẵn trên web và mỗi bộ biểu tượng này bao gồm hàng trăm biểu tượng. Điều này có nghĩa là bạn có thể có hàng nghìn biểu tượng để lựa chọn và tùy chỉnh hiển thị và phong cách của trang web của bạn.
Tùy chỉnh:
Nếu những tùy chọn vô tận không đủ, bạn có thể tùy chỉnh các bộ biểu tượng giống như bạn tùy chỉnh các phông chữ thông thường. Điều này có nghĩa là bạn có thể dễ dàng tạo kiểu cho chúng bằng cách sử dụng CSS để phù hợp với thiết kế của trang web của bạn. Với CSS, bạn có thể điều khiển kích thước, màu sắc và vị trí của biểu tượng. Bạn còn có thể thêm bóng đổ và đường viền cho biểu tượng của bạn.
Hiệu suất:
Bởi vì bộ biểu tượng là file vector, chúng nhỏ hơn so với các file hình ảnh thông thường, do đó hiệu suất tổng thể của trang web của bạn tốt hơn. Hơn nữa, bạn có thể xây dựng bộ biểu tượng tùy chỉnh của riêng bạn để chỉ tải các biểu tượng bạn cần cho trang web của bạn.
Với những lợi ích này, không có gì ngạc nhiên khi WordPress sử dụng một bộ biểu tượng cho giao diện sau cùng của nó. Bộ biểu tượng dashicons cung cấp tất cả các biểu tượng được sử dụng trong bảng điều khiển WordPress và bạn cũng có quyền truy cập vào những biểu tượng này cho trang web của bạn. Nhưng hãy xem cách chúng ta có thể thêm thậm chí nhiều bộ biểu tượng vào trang web của bạn.
Sử dụng bộ biểu tượng trong WordPress
Sức mạnh của bộ biểu tượng là bạn có thể tải chúng lên máy chủ web của bạn và sử dụng chúng trong các stylesheet WordPress của bạn. Và có hàng tá bộ biểu tượng để lựa chọn. Nhưng cũng có các dịch vụ cho phép bạn chọn từ kho biểu tượng và tạo bộ biểu tượng tùy chỉnh của riêng bạn.
Một ví dụ về các dịch vụ như vậy là Flaticon.com. Flaticon.com là một kho biểu tượng vector hàng triệu biểu tượng cho phép bạn dễ dàng tạo bộ biểu tượng riêng của mình và đóng gói nó để sử dụng trên trang web WordPress của bạn.
Trong hướng dẫn này, chúng ta sẽ sử dụng Flaticon.com để tạo một bộ biểu tượng, tùy chỉnh nó với CSS, tải lên WordPress và sau đó thêm nó vào một trang trên trang web của bạn.
Tạo bộ biểu tượng riêng của bạn với Flaticon.com
Với Flaticon, bạn có thể tạo một bộ gồm tối đa 10 biểu tượng mà không cần đăng ký. Tuy nhiên, nếu bạn đăng ký, bạn có thể tạo đến 3 bộ biểu tượng với tổng cộng 256 biểu tượng mỗi bộ. Bạn cũng có thể tải xuống một gói biểu tượng hoàn chỉnh, do đó, nếu bạn tìm thấy một bộ phù hợp với mình, bạn không cần phải tốn thời gian tạo các biểu tượng của riêng bạn, một cái một cái.
Để bắt đầu, nhập một từ hoặc cụm từ tìm kiếm. Chúng tôi sẽ sử dụng thuật ngữ “marketing” như là một ví dụ. Hãy đảm bảo đặt loại giấy phép thành “Miễn phí”. Bạn cũng muốn lọc phần phong cách thành “Đường viền đen” vì những biểu tượng này dễ dàng tùy chỉnh với CSS.
Khi bạn đã tìm thấy biểu tượng bạn thích, nhấp vào nó để mở cửa sổ xem trước. Ở đây, bạn có thể nhấp vào nút “Thêm vào bộ sưu tập” và sau đó nhấp vào nút đóng để quay lại kết quả tìm kiếm.
Từ đây, bạn có thể tiếp tục thêm biểu tượng vào bộ sưu tập của mình. Nếu bạn muốn tăng tốc một chút, bạn có thể di chuột qua biểu tượng bất kỳ và nhấp vào nút “Thêm vào bộ sưu tập” để thêm nó mà không cần mở cửa sổ xem trước.
Xem thêm : [Học HTML] Các thẻ định dạng chữ viết và văn bản
Một lời khuyên nhanh: Khi bạn đang thêm biểu tượng vào bộ sưu tập của mình, hãy cố gắng tìm các biểu tượng có cùng kiểu dáng để trang web của bạn trông thống nhất và dễ nhìn hơn. Các bộ biểu tượng cụ thể có thể hữu ích ở đây vì chúng được tạo bởi một nhà thiết kế duy nhất và cùng trông đồng nhất.
Khi bạn đã có tất cả các biểu tượng bạn muốn, hãy nhấp vào nút “Tải xuống Bộ sưu tập” ở trên cùng và sau đó chọn định dạng bộ biểu tượng.
Khi được nhắc, hãy chắc chắn nhấp vào nút “Biểu tượng font” để tải xuống bộ biểu tượng của bạn theo đúng định dạng.
Bây giờ bạn sẽ có một tập tin zip chứa mọi thứ bạn cần để thêm bộ biểu tượng mới vào WordPress. Hãy giải nén các tập tin vào một thư mục trên máy tính của bạn và mở nó lên.
Tải bộ biểu tượng mới của bạn lên WordPress
Bước tiếp theo là tải bộ biểu tượng mới của bạn lên WordPress. Nhưng trước khi làm điều đó, chúng ta sẽ tạo phong cách cho nó bằng một chút CSS. Mở tệp flaticon.css
trong trình chỉnh sửa văn bản hoặc mã yêu thích của bạn và tìm dòng sau:
.icon {
// properties here
}
Đây là lớp CSS được sử dụng để tạo kiểu cho biểu tượng của chúng ta. Thay đổi các thuộc tính lớp bên trong ngoặc nhọn {}
thành các giá trị sau:
.icon {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
Đây là các thuộc tính cơ bản để biểu tượng trông lớn hơn và căn giữa.
Bây giờ hãy xem các lớp biểu tượng riêng lẻ:
.icon-icon1:before {
// styles here
}
.icon-icon2:before {
// styles here
}
.icon-icon3:before {
// styles here
}
.icon-icon4:before {
// styles here
}
Mỗi lớp trên đại diện cho một biểu tượng chúng ta đã thêm vào bộ sưu tập font của chúng ta. Chúng ta sẽ cần sử dụng tên các lớp này khi thêm biểu tượng vào trang web của chúng ta. Sẽ có thêm thông tin về điều đó sau.
Khi bạn đã chỉnh sửa xong, hãy lưu tệp.
Tiếp theo, chúng ta sẽ cần tải lên các tệp bằng ứng dụng FTP như FileZilla hoặc Cyberduck. Chúng cần được đặt trong thư mục css trong thư mục chủ đề của bạn, thông thường có cấu trúc như sau:
/public_html/wp-content/themes/ten-chu-de-cua-ban/css/
Sau khi tệp đã được tải lên, bạn sẽ cần chỉnh sửa tệp functions.php
của chủ đề của bạn. Nếu bạn đang sử dụng một chủ đề mẫu, bạn có thể muốn sử dụng chủ đề con ở đây. Điều này đảm bảo mã của bạn không bị sửa đổi khi nhà phát triển cập nhật chủ đề của mình.
Xem thêm : Thiết kế UI/UX là gì? Khóa học thiết kế UI/UX – FPT Arena Multimedia
Để chỉnh sửa tệp functions.php
của mình, vào bảng điều khiển WordPress của bạn và nhấp vào Giao diện > Trình chỉnh sửa giao diện
. Sau đó, nhấp vào Chức năng chủ đề
ở phía bên phải của trình chỉnh sửa mã. Cuối tệp, sau tất cả các khối mã khác, sao chép và dán mã sau vào trình soạn thảo:
function add_custom_icon_font() {
wp_enqueue_style( 'custom-icon-font', get_stylesheet_directory_uri() . '/css/flaticon.css' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_icon_font' );
Bạn muốn đảm bảo rằng đường dẫn bên trong hàm khớp với thư mục mà bạn đã tải lên các tệp của mình. Lưu tệp lại và sẵn sàng thêm biểu tượng tùy chỉnh vào trang web của bạn!
Sử dụng biểu tượng mới của bạn
Trong ví dụ này, chúng tôi sẽ sử dụng trình tạo WPBakery, nhưng nguyên tắc tương tự cũng áp dụng cho bất kỳ plugin trình tạo trang nào. Để bắt đầu, tạo một hàng mới trên trang mà bạn muốn thêm biểu tượng của bạn và cấu trúc nó thành ba cột.
Hãy nhớ tên lớp của biểu tượng chúng tôi đã xem xét trước đó trong tệp flaticons.css
. Đây là nơi chúng cần thiết.
Trong mỗi cột, thêm một module HTML và dán mã đại diện cho một biểu tượng khác nhau. Ví dụ: mã sau đây là cho biểu tượng flaticon-bar-chart.
Nó sẽ trông như thế này:
<i class="icon-icon1"></i>
Dưới mỗi module, thêm một khối văn bản và một số văn bản kết hợp với biểu tượng của bạn. Điều này có thể là một tiêu đề kết hợp với một danh sách dịch vụ hoặc một mô tả ngắn nào đó.
Khi bạn đã hoàn thành việc chỉnh sửa trang, nó sẽ trông như sau:
Nhấp vào nút Xem trước để xem những gì bạn đã làm cho đến nay:
Dễ thương phải không?
Nhưng nếu chúng ta muốn tiến xa hơn, chúng ta có thể sửa đổi tệp flaticons.css
để làm cho mọi thứ thêm phần hấp dẫn. Hãy nhớ rằng, với CSS, bạn có thể dễ dàng điều chỉnh màu sắc và kích thước biểu tượng của mình, giữa những thứ khác.
Ví dụ: bạn có thể muốn có một biểu tượng ở nhiều vị trí trên trang web của bạn, chẳng hạn như trên trang chủ và trong phần chân trang. Với CSS, bạn có thể sửa đổi biểu tượng trên trang chủ để làm nó lớn hơn và nổi bật hơn trong khi biểu tượng vẫn nhỏ hơn trong phần chân trang. Để xem chính xác cách nó hoạt động, hãy thay đổi các màu của biểu tượng của chúng tôi để làm cho chúng nổi bật hơn một chút.
Mở tệp flaticons.css
và thêm mã sau vào đó:
.icon-icon1:before {
color: #ff0000;
}
.icon-icon2:before {
color: #00ff00;
}
.icon-icon3:before {
color: #0000ff;
}
.icon-icon4:before {
color: #ffff00;
}
Lưu tệp và sau đó sử dụng ứng dụng FTP của bạn để tải lên lại. Lưu ý rằng, bất kỳ khi nào bạn thay đổi tệp CSS của mình, bạn sẽ cần tải lên lại và ghi đè lên tệp cũ. Tiếp theo, quay lại và chỉnh sửa trang mà chúng ta đã thêm biểu tượng. Bạn sẽ cần thêm các lớp CSS vào các khối HTML chúng tôi đã tạo:
Lưu trang và kiểm tra kết quả!
Kết luận: Thêm biểu tượng vào WordPress
Bây giờ chúng ta đã tiến qua quá trình thêm một bộ biểu tượng tùy chỉnh vào WordPress, chúng ta đã mở ra một thế giới mới về khả năng. Với Flaticon.com, có vô số lựa chọn về biểu tượng bạn có thể sử dụng trên trang web của bạn. Chỉ cần nhớ chọn các biểu tượng dễ tùy chỉnh, trông chuyên nghiệp và nhìn thống nhất. Theo những quy tắc đơn giản này, các biểu tượng mới có thể giúp trang web WordPress của bạn trở nên mới mẻ và mới mẻ hơn. Không chỉ vậy, hiệu suất trang web cải thiện và trải nghiệm người dùng tốt hơn có nghĩa là trang web của bạn có thể có hiệu suất tốt hơn trong xếp hạng tìm kiếm.
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web