• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Thêm icon vào menu của Genesis Framework và child theme

Thêm icon vào menu của Genesis Framework và child theme

09/03/2014 13/05/2018 Trung Hiếu 76 Bình luận

Mục lục bài viết

  1. Thêm icon vào menu Genesis Framework và child theme

Thêm icon vào menu của Genesis Framework và Genesis child theme.

theme-icon-vao-menu-cua-genesis-framework-va-child-theme

Bạn đã quá nhàm chán với việc suốt ngày phải nhìn vào một thanh menu toàn chữ là chữ? Chúng quá đơn điệu và không hề bắt mắt một chút nào. Bạn có muốn một thanh menu sống động, trông như hình minh họa bên trên? Vô cùng đơn giản. Ngay sau đây, tôi sẽ hướng dẫn các bạn cách thêm icon vào menu của Genesis Framework hoặc Genesis child themes chỉ với vài bước đơn giản. Hướng dẫn cũng có thể được áp dụng cho các WordPress themes khác.

Tham khảo thêm:

  • Thêm icon vào tiêu đề widget trong WordPress
  • Làm thế nào để thêm icon vào menu của WordPress?

Thêm icon vào menu Genesis Framework và child theme

1. Thêm đoạn code dưới đây vào cuối file functions.php của Genesis Framework hoặc child theme mà bạn đang dùng.

Lưu ý: với theme Paradise, chúng tôi đã tích hợp sẵn Font Awesome v4.7.0 vào trong theme nên các bạn không cần phải thêm code bên trên nữa.

2. Truy cập vào Appearance => Menus (nơi tạo và chỉnh sửa menu), thêm <span> class dưới đây vào mục Navigation Label, trước các nhãn:

Các bạn cũng có thể sử dụng <i> class nếu <span> class không có tác dụng:

Giữa 2 dấu (“) là nơi bạn thêm mã của Font Awesome vào. Danh sách bảng mã, vui lòng xem tại đây. Ví dụ tôi muốn thêm biểu tượng nút home, tôi sẽ điền code là fa fa-home, xem hình minh họa bên dưới:

chèn-code-font-awesome-vao-menu

Lưu ý: kể từ phiên bản 5.0, Font Awesome đã sử dụng tiền tố khác (fas, far và fal thay cho fa), tuy nhiên trong bài hướng dẫn này chúng ta sử dụng Font Awesome v4.7.0 nên cả bạn phải sửa lại là fa thì icon mới hiển thị.

Làm tương tự với các nhãn khác trong menu. Sau khi hoàn tất, lưu lại và xem kết quả. Đơn giản vậy thôi. Chúc các bạn thành công!

Bạn có phương pháp đơn giản và hiệu quả hơn để thêm icon vào menu Genesis Framework và child theme? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)

4.8 / 5 ( 40 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

sap-xep-danh-sach-bai-viet-theo-ngay-chinh-sua
Sắp xếp danh sách bài viết trong WordPress theo ngày cập nhật
Tạo Genesis responsive slider cho theme Paradise
Theme Paradise giảm giá sốc, ra mắt phiên bản 4.0

Chuyên mục: Thủ thuật WordPress Thẻ: Thủ thuật Genesis

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Tùy biến breadcrumbs trong Genesis Framework và child theme
Bài viết sau Hướng dẫn thay favicon cho Genesis Framework và child theme »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Hoàng Nguyễn viết

    11/05/2017 lúc 17:21

    Mình thêm icon vào menu thấy chữ(category) ở thanh menu bé xíu đi, muốn tăng cỡ chữ ở menu cho to lên thì chỉnh ở phần nào vậy bạn

    Trả lời
  2. Nguyen Le viết

    03/05/2018 lúc 12:41

    Phiên bản hiện tại hình như 4.7 làm không được ad ơi

    Trả lời
    • Trung Hiếu viết

      03/05/2018 lúc 12:51

      Vẫn làm được mà bạn. Tuy nhiên phiên bản trên trang chủ của FontAwesome giờ đã là 5.0 rồi nên mã cũng đã bị thay đổi so với phiên bản 4.7.0. Thay vì sử dụng mã fab, fas hay far như trên trang chủ thì bạn cứ dùng mã fa cũ là được.

      Trả lời
  3. Minh Quế viết

    13/05/2018 lúc 17:52

    dùng code ở link cũ này mới được nhé https://fontawesome.com/v4.7.0/icons/

    Trả lời
    • Trung Hiếu viết

      13/05/2018 lúc 18:18

      Đã sửa link trong bài. Cảm ơn bạn đã góp ý. :)

      Trả lời
      • Minh Quế viết

        13/05/2018 lúc 21:29

        ờ, vì mình làm theo hướng dẫn với link mới nhất của nó không đc, ở link cũ chỉ cần cập nhật code bình thường vào là ok

        Trả lời
  4. Long viết

    14/05/2018 lúc 14:38

    Bạn có đường dẫn có bản 5.0 không vậy cho mình xin đường dẫn với. Cảm ơn.

    Trả lời
    • Trung Hiếu viết

      14/05/2018 lúc 15:58

      Đây bạn: https://use.fontawesome.com/releases/v5.0.12/css/all.css

      Trả lời
  5. Vinh viết

    22/05/2018 lúc 11:41

    Cho hỏi cách code chuyển màu đen sang màu khác thanh MENU childtheme Magazine Pro của Genesis Framework giúp e với. Tks

    Trả lời
    • Trung Hiếu viết

      22/05/2018 lúc 11:58

      Chèn code này vào Appearance => Customize => Additional CSS:

      .nav-primary {
      background-color: #222;
      }

      Nhớ thay mã màu hexa cho hợp lý.

      Trả lời
      • Vinh viết

        22/05/2018 lúc 16:27

        Ko a ơi, ý em là chỉnh thanh MENU nền trắng chữ đen có gạch xanh giống hình phía trên bài này a post ak? E Ko biết tuỳ chỉnh như thế nào từ đen sang như thế dc? A giúp e với?

        Trả lời
        • Trung Hiếu viết

          22/05/2018 lúc 16:33

          Trong bài viết là theme khác mà bạn. Có ai nói đó là theme Magazine Pro đâu? Website phát hành theme đó (WP Canada) cũng đã bị đóng cửa từ lâu rồi. Bạn muốn tùy biến thì tự tìm hiểu nhé. Cái này nó liên quan đến CSS. Mình không có thời gian để hỗ trợ các vấn đề liên quan đến tùy biến giao diện đâu. Bạn thông cảm.

          Trả lời
  6. Ngô Văn Cương viết

    17/12/2018 lúc 09:33

    Làm sao để tải không đồng bộ cái Font awesome này ad nhỉ

    Trả lời
    • Trung Hiếu viết

      18/12/2018 lúc 07:04

      Nếu FontAwesome được tích hợp sẵn trong mã nguồn theme thì nó luôn load sau các thành phần khác mà. Chỉ có FontAwesome load từ nguồn bên ngoài (MaxCDN, BootstrapCDN…) thì mới load trước thôi.

      Trả lời
      • Ngô Văn Cương viết

        18/12/2018 lúc 09:02

        Em dùng shortcode của Ad thấy google pagespeed cảnh báo :(

        Trả lời
        • Trung Hiếu viết

          18/12/2018 lúc 10:32

          Bạn thấy site của mình có bị không? :P

          Trả lời
  7. Ngô Văn Cương viết

    09/01/2019 lúc 09:31

    Làm sao để tắt ping back trong theme vậy ad, em liên hệ skype mà không được trả lời.
    https://imgur.com/3d0xlAN
    Hỗ trợ dùm em với :(

    Trả lời
    • Trung Hiếu viết

      09/01/2019 lúc 15:56

      Ping Back, Track Back là tính năng của WordPress mà. Liên quan gì đến theme? Bạn vào Settings => Discussion => Bỏ tick trong 2 mục là “Attempt to notify any blogs linked to from the article” và “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles” đi là được.

      Trả lời
  8. Ngoc Blue viết

    15/07/2020 lúc 15:39

    Mình vừa update theme Paradise, bị mất font awesome ở menu. Mã font có thay đổi gì ko Hiếu nhỉ?

    Trả lời
    • Trung Hiếu viết

      15/07/2020 lúc 15:40

      Kể từ phiên bản 5.4.0, bên mình đã loại bỏ Font Awesome và không hỗ trợ chèn icon vào menu nữa bạn nhé. Thông tin chi tiết bạn có thể xem tại đây.

      Trả lời
      • Ngoc Blue viết

        15/07/2020 lúc 15:43

        À, thế có cách nào thay thế ko Hiếu?
        Mà sao dạo này cứ trả lời lần 2 lại hiện mỗi khung email nhỉ

        Trả lời
        • Trung Hiếu viết

          15/07/2020 lúc 15:49

          Không nên tích hợp thêm fonts icon vào website nhé, nếu bạn muốn cải thiện tốc độ load web và điểm Core Web Vitals. Đó cũng là lý do bên mình quyết định loại bỏ Font Awesome.

          Trả lời
          • Ngoc Blue viết

            15/07/2020 lúc 15:52

            Ok mình hiểu rồi. Cảm ơn Hiếu!

          • Trung Hiếu viết

            15/07/2020 lúc 15:53

            Sau khi loại bỏ Font Awesome thì dung lượng theme giảm từ gần 1MB xuống chỉ còn hơn 300KB, đủ thấy nó nặng như thế nào rồi đấy. :D

          • Ngoc Blue viết

            15/07/2020 lúc 15:55

            Hơi buồn 1 tí, mà thôi đành vậy :P

« 1 2 3

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Tinh giản WooCommerce giúp website của bạn nhẹ hơn 04/04/2021
  • Tinh giản WordPress giúp website của bạn nhẹ hơn 16/03/2021
  • Trì hoãn tải script của bên thứ ba trong WordPress 10/03/2021
  • Nâng cấp tính năng tìm kiếm mặc định của WordPress 04/03/2021
  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Land trong Hướng dẫn cài đặt nhanh WordPress với Softaculous
  • Học Luật trong Tinh giản WordPress giúp website của bạn nhẹ hơn
  • Trung Hiếu trong Cài HTTPS cho WordPress nhanh chóng với Really Simple SSL
  • Land trong Cài HTTPS cho WordPress nhanh chóng với Really Simple SSL

Bình luận nhiều nhất (tháng)

  1. David Do (2)
  2. Hoàng Minh (2)
  3. Học Luật (2)
  4. Kami (2)
  5. Land (2)
  6. Gia Tuấn (1)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 982 Bài viết - 37378 Bình luận
positivessl-trust-seal

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting