{"id":7396,"date":"2021-06-10T05:34:51","date_gmt":"2021-06-10T05:34:51","guid":{"rendered":"https:\/\/readyship.co\/blog\/?p=7396"},"modified":"2021-06-10T05:34:54","modified_gmt":"2021-06-10T05:34:54","slug":"add-font-awesome-icons-wordpress-menu-no-plugin","status":"publish","type":"post","link":"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/","title":{"rendered":"How to Add Font Awesome Icons to WordPress Menu without a Plugin"},"content":{"rendered":"\n

Adding icons to your WordPress menu can improve the design, user experience, and even conversions because visuals can grab the users’ attention. <\/p>\n\n\n\n

One of the best ways to achieve this is to use Font Awesome, which is a well-known platform that provides a lot of quality icons that you can add to your WordPress menu and other places. <\/p>\n\n\n\n

Font Awesome also makes it easier to implement their icons in your WordPress website, with or without a plugin. <\/p>\n\n\n\n

In this step-by-step tutorial, I’ll take the latter approach. I’ll show you how to add Font Awesome icons to your WordPress menu without a plugin. It’s a little bit more advanced, but I’ll try to make it easier for beginners as well.<\/p>\n\n\n\n

Let’s get to work!<\/p>\n\n\n\n

\n

Contents<\/strong><\/p>\n\n\n\n

  1. Using Font Awesome Kit vs CDN<\/a><\/li>
  2. Setting Up the Font Awesome Kit in WordPress<\/a><\/li>
  3. Adding the Font Awesome Icons to the WordPress Menu<\/a><\/li>
  4. Fixing the Font Awesome Icons in the WordPress Menu<\/a><\/li>
  5. Customizing the Font Awesome Icons in the WordPress Menu<\/a><\/li><\/ol>\n<\/div><\/div>\n\n\n\n

    Using Font Awesome Kit vs CDN<\/h2>\n\n\n\n

    Before getting to the main point, let me write a bit about the Font Awesome Kit<\/a> and CDN. <\/p>\n\n\n\n

    In most tutorials on this topic, you’ll see that the CDN method is used. That’s because they’re old and not updated yet.<\/p>\n\n\n\n

    While the CDN option is still somewhat available, it’s discontinued, as it’s mentioned by Font Awesome:<\/p>\n\n\n\n

    \n

    John, this version of Font Awesome’s CDN is being Sunsetted.

    You may still use it for any of the domains you’ve set below, but we will not be bringing new features to this service. Instead, we’re using Font Awesome Kits host and do even more for you with auto-accessibility, better performance, updates without touching code, and more!<\/p><\/blockquote>\n<\/div><\/div>\n\n\n\n

    \"font<\/figure><\/div>\n\n\n\n

    If you’re wondering why they call me John, not Radu – it’s because I set up an account for testing purposes, and I added John Doe as my name. \ud83d\ude42<\/p>\n\n\n\n

    Back to the point – You’ll also need to subscribe to the Pro version to use the CDN.<\/p>\n\n\n\n

    \n

    You Need a Pro Subscription to use the Pro CDN

    A subscription gets you access to services like the Pro CDN, new icons as soon as they are released, updates, and dedicated support from the Font Awesome Team.<\/p><\/blockquote>\n\n\n\n

    <\/p>\n<\/div><\/div>\n\n\n\n

    \"pro<\/figure><\/div>\n\n\n\n

    Moreover, using the CDN feature is more complicated, requiring more custom code to be added, as you can see in the documentation<\/a>.<\/p>\n\n\n\n

    So, since the Font Awesome Kit is the new kid on the block, bringing new features, auto-accessibility, better performance, and updates, you’d be better off using it from the start to add icons to your WordPress menu.<\/p>\n\n\n\n

    Oh, and don’t think that the Font Awesome Kit doesn’t rely on a CDN, because it does, as they mention here<\/a>. <\/p>\n\n\n\n

    So don\u2019t think that the kits approach in these examples is sans-CDN. Kits are backed by a fast and stable CDN.<\/p><\/blockquote>\n\n\n\n

    So, your Font Awesome icons will still be served fast.<\/p>\n\n\n\n

    Now, let’s see how to use it.<\/p>\n\n\n\n

    \n

    Looking to Buy or Sell WordPress Sites?<\/p>\n\n\n\n

    At ReadyShip, we offer an all-in-one WordPress solution for those looking to start a blog or site, as well as the opportunity for WordPress developers or professionals to sell their products!<\/p>\n\n\n\n

    \n
    Browse Sites<\/a><\/div>\n\n\n\n
    Start Selling<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

    Setting Up the Font Awesome Kit in WordPress<\/h2>\n\n\n\n

    So, I mentioned above why Font Awesome Kit is the way to go nowadays. Now, let’s see how to set it up in WordPress to enable the icons for the menu.<\/p>\n\n\n\n

    Step 1<\/h3>\n\n\n\n

    Create a Font Awesome account here<\/a>. <\/p>\n\n\n\n

    \"font<\/figure><\/div>\n\n\n\n

    Add your email, click on the verification link that you receive in your inbox, then set up your password. <\/p>\n\n\n\n

    Once you finish that, you’ll be brought to your Font Awesome Kit, which is automatically created for you.<\/p>\n\n\n\n

    \"font<\/figure><\/div>\n\n\n\n

    Step 2<\/h3>\n\n\n\n

    Your Font Awesome Kit will be named something random, hard to remember. You can see from the above screenshot that mine was named 0654eeb6db<\/code>. <\/p>\n\n\n\n

    I recommend changing that with something else.<\/p>\n\n\n\n

    So, go to Settings<\/strong> and change the name in the Kit Name<\/strong> field. You could add your website name, for example. I’ll be adding wplab<\/code>, which is the domain name for my WordPress testing site.<\/p>\n\n\n\n

    \"renaming<\/figure><\/div>\n\n\n\n

    Scroll down and click on the Save Changes<\/strong> button.<\/p>\n\n\n\n

    Step 3<\/h3>\n\n\n\n

    It’s a good idea to add your domain to your Font Awesome Kit. Otherwise, other people can use it on their sites because the link will be visible on your WordPress site’s source code. Anyone can grab it.<\/p>\n\n\n\n

    So, it’s best to limit the Kit usage only to your domain(s).<\/p>\n\n\n\n

    To do that, go to the Settings<\/strong> page if you’re not there already from step 2, scroll down to the Domains<\/strong> section, and click on the Add a domain<\/strong> button.<\/p>\n\n\n\n

    \"adding<\/figure><\/div>\n\n\n\n

    Step 4<\/h3>\n\n\n\n

    Depending on your needs, you can add it in different ways. <\/p>\n\n\n\n

    For example, I added *.wplab.cyou<\/code> because I want the Font Awesome Kit to cover any potential subdomains as well, including www<\/code>.<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    You can find details and examples by clicking on the Full details<\/strong> link under the field. A popup will show up with what you need to know.<\/p>\n\n\n\n

    \"domain<\/figure><\/div>\n\n\n\n

    If you have a simple domain name without www<\/code>, like example.com<\/code>, and you know for sure that you’ll only use Font Awesome on that one, then you can simply add example.com<\/code> there. The same goes for the www<\/code> version.<\/p>\n\n\n\n

    Click on the Save Changes<\/strong> button again once you’re done.<\/p>\n\n\n\n

    Step 5<\/h3>\n\n\n\n

    Now, we’ll use the official documentation on how to set up Font Awesome Kit in WordPress without a plugin<\/a>.<\/p>\n\n\n\n

    The first thing you need to do is to access your theme’s functions.php<\/code> file because you’ll need to add a code snippet there. Here’s a tutorial that I wrote on how to access and edit your WordPress files using 3 different methods<\/a>.<\/p>\n\n\n\n

    For safety, especially if you’re a beginner, I recommend that you back up your functions.php<\/code> file or the entire WordPress website<\/a>.<\/p>\n\n\n\n

    I strongly recommend having a child theme<\/a> in place and adding the code in its function.php<\/code> file. Otherwise, the changes will be gone with the next theme update if you add it in the parent theme’s file.<\/p>\n\n\n\n

    The usual path to the file is:<\/p>\n\n\n\n

    public_html\/wp-content\/themes\/YourThemeName-child\/functions.php<\/code><\/pre>\n\n\n\n
    \"Editing
    Editing Twenty Sixteen’s functions.php file in cPanel’s File Manager<\/figcaption><\/figure><\/div>\n\n\n\n
    If you don’t have a child theme<\/strong>, then you can use a plugin called Code Snippets<\/a>. It allows you to add PHP code snippets to your WordPress website. <\/p>\n\n\n\n
    The Code Snippets plugin could be a better choice if you think that you might change your WordPress theme in the future.<\/p>\n\n\n\n
    Step 6<\/h3>\n\n\n\n
    Now that you found and opened the functions.php<\/code> file, or installed the Code Snippets plugin, you can copy and paste the following code snippet there. <\/p>\n\n\n\n
    Note that this code is taken from Font Awesome’s documentation<\/a>. While it will probably not change soon or at all, you should still check it out to see if any updates were made to it. <\/p>\n\n\n\n
    \/**\n * Font Awesome Kit Setup\n * \n * This will add your Font Awesome Kit to the front-end, the admin back-end,\n * and the login screen area.\n *\/\nif (! function_exists('fa_custom_setup_kit') ) {\n  function fa_custom_setup_kit($kit_url = '') {\n    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {\n      add_action(\n        $action,\n        function () use ( $kit_url ) {\n          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );\n        }\n      );\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
    If you’re using the functions.php<\/code> file, paste it right after anything that you already have there.<\/p>\n\n\n\n
    Now, right after that snippet, paste this line as well:<\/p>\n\n\n\n
    fa_custom_setup_kit('https:\/\/kit.fontawesome.com\/42deadbeef.js');<\/code><\/pre>\n\n\n\n
    Now, here, it’s important to change<\/strong> the .js<\/code> file name from the link with your own Font Awesome Kit token, which was the random name from step 2, before the change. <\/p>\n\n\n\n
    Don’t worry, you can still find it in your Font Awesome account by going to Kits<\/strong>, then clicking on your Kit’s name.<\/p>\n\n\n\n
    \"selecting<\/figure><\/div>\n\n\n\n
    This will bring up your Kit’s dashboard. There, on the How to Use<\/strong> tab, from the Kit Code<\/strong>, copy only<\/strong> the token, which is basically the name of the .js<\/code> file from the link. Copy it without the .js<\/code> extension.<\/p>\n\n\n\n
    \"copy<\/figure><\/div>\n\n\n\n
    In my case, the token is 0654eeb6db<\/code>. So, I’ll replace it in the last line of code that I told you to paste at the end of the first code snippet. Thus, the last line of code for me will be this one, with my own token in it:<\/p>\n\n\n\n
    fa_custom_setup_kit('https:\/\/kit.fontawesome.com\/0654eeb6db.js');<\/code><\/pre>\n\n\n\n
    So, I replaced 42deadbeef<\/code> with my token, which is 0654eeb6db<\/code>. And, finally, the whole code looks like this:<\/p>\n\n\n\n
    \/**\n * Font Awesome Kit Setup\n * \n * This will add your Font Awesome Kit to the front-end, the admin back-end,\n * and the login screen area.\n *\/\nif (! function_exists('fa_custom_setup_kit') ) {\n  function fa_custom_setup_kit($kit_url = '') {\n    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {\n      add_action(\n        $action,\n        function () use ( $kit_url ) {\n          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );\n        }\n      );\n    }\n  }\n}\nfa_custom_setup_kit('https:\/\/kit.fontawesome.com\/0654eeb6db.js');<\/code><\/pre>\n\n\n\n
    Here’s how it looks pasted in a child theme’s functions.php<\/code> file, using cPanel’s File Manager.<\/p>\n\n\n\n
    \"font<\/figure><\/div>\n\n\n\n
    And here’s how it looks like in Code Snippets, instead of a child theme’s functions.php<\/code> file:<\/p>\n\n\n\n
    \"font<\/figure><\/div>\n\n\n\n
    In Code Snippets, you just click on Add New<\/strong>, add a descriptive name, paste the code, then save.<\/p>\n\n\n\n
    \n
    Looking for an All-in-One WordPress Solution?<\/strong><\/p>\n\n\n\n
    ReadyShip offers you ready-made WordPress sites and blogs, plus high-quality managed AWS hosting with free SSL and CDN, at no initial cost!<\/strong><\/p>\n\n\n\n
    \n
    Visit Marketplace<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    Adding the Font Awesome Icons to the WordPress Menu<\/h2>\n\n\n\n
    Now that you’ve set up the Font Awesome Kit, let’s see how to add the icons to the WordPress menu manually, without a plugin.<\/p>\n\n\n\n
    Step 1<\/h3>\n\n\n\n
    Access your WordPress menu by going to Appearance<\/strong> > Menus<\/strong>. <\/p>\n\n\n\n
    There, click on Screen Options<\/strong>, which you’ll find in the top-right corner, right under your WordPress username and avatar.<\/p>\n\n\n\n
    Now, under Show advanced menu properties<\/strong>, enable CSS Classes<\/strong> by checking the box next to it.<\/p>\n\n\n\n
    \"enable<\/figure>\n\n\n\n
    Step 2<\/h3>\n\n\n\n
    Go to Font Awesome’s free icons<\/a> (if you don’t have Pro), search for the icon that you want, and click on it to bring up more options.<\/p>\n\n\n\n
    I’ve chosen a house icon to add for the Home page in my WordPress menu.<\/p>\n\n\n\n
    After selecting your Font Awesome icon, copy only the class from the <i><\/code> tag. That’s all you need. You don’t need the whole tag in this case.<\/p>\n\n\n\n
    \"font<\/figure><\/div>\n\n\n\n
    In my case, the class is fas fa-home<\/code>.<\/p>\n\n\n\n
    Step 3<\/h3>\n\n\n\n
    Go back to your WordPress menu, open up a menu item by clicking on the down arrow, and paste the class from Font Awesome in the CSS Classes (optional)<\/strong> field.<\/p>\n\n\n\n
    \"add<\/figure><\/div>\n\n\n\n
    Repeat steps 2 and 3 for every WordPress menu item where you want to add Font Awesome icons.<\/p>\n\n\n\n
    Click on the Save Menu<\/strong> button when you’re done.<\/p>\n\n\n\n
    Step 4<\/h3>\n\n\n\n
    Check to see if the Font Awesome icons appear in your WordPress menu.<\/p>\n\n\n\n
    If they don’t show up at all, it might be a caching issue. Make sure you clear any caching system that you might have from a plugin, CDN, your hosting, and even your theme in rare cases. <\/p>\n\n\n\n
    Also, use a Private\/Incognito window in your browser to bypass its cache.<\/p>\n\n\n\n
    They did show up for me, but they are not positioned right, as you can see.<\/p>\n\n\n\n
    \"font<\/figure><\/div>\n\n\n\n
    The Font Awesome classes also affected the text’s style. <\/p>\n\n\n\n
    This happens because the Font Awesome class is added in the tag that handles the whole WordPress menu item. So, whatever code the Font Awesome class holds, it’s passed onto the WordPress menu item as well.<\/p>\n\n\n\n
    This type of problem might not happen to you. Or it might happen differently. It depends on your WordPress theme. <\/p>\n\n\n\n
    Fortunately, it can be fixed with some CSS code. Unfortunately, there’s no one-size-fits-all solution<\/strong>. All I can do is to show you how I fixed my problem, hoping that in case you have an issue, it’s the same one, and you can fix it, too.<\/p>\n\n\n\n
    \n
    Looking for an All-in-One WordPress Solution?<\/strong><\/p>\n\n\n\n
    ReadyShip offers you ready-made WordPress sites and blogs, plus high-quality managed AWS hosting with free SSL and CDN, at no initial cost!<\/strong><\/p>\n\n\n\n
    \n
    Visit Marketplace<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    Fixing the Font Awesome Icons in the WordPress Menu<\/h2>\n\n\n\n
    To fix the issues that I got, I used some CSS code. You can use it, too, if you have the same problem.<\/p>\n\n\n\n
    Here’s a tutorial that I wrote on how to add custom CSS in WordPress using different methods<\/a>. <\/p>\n\n\n\n
    I’ll be using the WordPress Customizer to add the CSS code. You’ll find that by going to Appearance<\/strong> > Customize<\/strong> > Additional CSS<\/strong>.<\/p>\n\n\n\n
    To bring the Font Awesome icons on the same row with the WordPress menu items, I used this code:<\/p>\n\n\n\n
    \/* Add Font Awesome icons on the same row as menu items *\/\n.main-navigation li.fas {\n\tdisplay: flex;\n\talign-items:center;\t\n}<\/code><\/pre>\n\n\n\n
    What’s between \/* *\/<\/code> are commentaries, so I can know what’s the code for. I recommend that you do the same. You’ll be thanking yourself in the future.<\/p>\n\n\n\n
    \"aligning<\/figure><\/div>\n\n\n\n
    As you can see, it aligned them nicely.<\/p>\n\n\n\n
    Now, to bring back my initial font family and weight for the WordPress menu, I added this code:<\/p>\n\n\n\n
    \/* Font Awesome classes changed the menu items' style. Changing it back *\/\n.main-navigation li a {\n\tfont-family: 'Montserrat';\n\tfont-weight: 300;\n}<\/code><\/pre>\n\n\n\n
    \"fixing<\/figure><\/div>\n\n\n\n
    As you can see, they look different now. Back to normal.<\/p>\n\n\n\n
    Of course, your WordPress theme might use another font family and weight. You’ll need to find them out, most likely from your theme settings.<\/p>\n\n\n\n
    If the theme settings are of no help, you’ll need some basic CSS knowledge, as well as knowing how to use the browser’s Inspect Element feature.<\/p>\n\n\n\n
    Or, if your theme developers are nice and helpful, you could ask them about the font and weight.<\/p>\n\n\n\n
    Customizing the Font Awesome Icons in the WordPress Menu<\/h2>\n\n\n\n
    Your Font Awesome Kit also offers you some styling options, such as spacing, coloring, rotating, and more. You can find them in your Kit, under the Add Some Styles<\/strong> section. <\/p>\n\n\n\n
    \"font<\/figure><\/div>\n\n\n\n
    Each of those provides more classes that you can use in addition to the icon class that you added in the menu item field, in WordPress.<\/p>\n\n\n\n
    So, if you click on Sizing, you’ll find out that there are several additional classes that you can use to resize your Font Awesome icons in the WordPress menu.<\/p>\n\n\n\n
    \"\"
    Examples of icon sizing from Font Awesome<\/figcaption><\/figure><\/div>\n\n\n\n
    Note that some classes are available only for Pro users<\/strong>.<\/p>\n\n\n\n
    So, to make a Font Awesome icon large, for example, you’ll need to use the fa-lg<\/code> class. That class, in addition to the main Font Awesome class that you added, will result in this, in WordPress:<\/p>\n\n\n\n
    fas fa-home fa-lg<\/code><\/pre>\n\n\n\n
    \"multiple<\/figure>\n\n\n\n
    Of course, you can further customize the icons based on your preference by using custom CSS. You don’t have to limit yourself to the pre-made classes offered by Font Awesome. <\/p>\n\n\n\n
    For example, since some coloring classes are only available for Pro users, and it doesn’t actually involve colors anyway, you can change it yourself.<\/p>\n\n\n\n
    \/* Styling Font Awesome icons in the menu *\/\n.main-navigation li.fas {\t\n\tcolor: #ff0000; \/* Making the icons red *\/\n}\n<\/code><\/pre>\n\n\n\n
    \"Changing
    Changing the color of the Font Awesome icons to red<\/figcaption><\/figure><\/div>\n\n\n\n
    If you know some basic CSS, you’re gucci.<\/p>\n\n\n\n
    \n
    Looking for an All-in-One WordPress Solution?<\/strong><\/p>\n\n\n\n
    ReadyShip offers you ready-made WordPress sites and blogs, plus high-quality managed AWS hosting with free SSL and CDN, at no initial cost!<\/strong><\/p>\n\n\n\n
    \n
    Visit Marketplace<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
    The End<\/h2>\n\n\n\n
    That’s it, folks! That’s how you add Font Awesome icons to your WordPress menu without a plugin. <\/p>\n\n\n\n
    You set up the Font Awesome Kit, add the code snippet, enable CSS classes for the WordPress menu, then add the Font Awesome icon classes.<\/p>\n\n\n\n
    Unfortunately, some issues with styling might appear, so you’ll need to get your hands dirty some more by tweaking things with some custom CSS code.<\/p>\n\n\n\n
    Adding things manually usually requires a bit more work than using a plugin. So, if you’re a complete beginner to WordPress, CSS, and all that jazz, you might need to rely on a plugin.<\/p>\n\n\n\n
    If you have questions or thoughts, feel free to leave a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Adding icons to your WordPress menu can improve the design, user experience, and even conversions because visuals can grab the users’ attention. One of the best ways to achieve this is to use Font Awesome, which is a well-known platform that provides a lot of quality icons that you can add to your WordPress menu and other places. Font Awesome also makes it easier to implement their icons in your WordPress website, with or without a plugin. In this step-by-step tutorial, I’ll take the latter approach. I’ll show you how to add Font Awesome icons to your WordPress menu without a plugin. It’s a little bit more advanced, but I’ll […]<\/p>\n","protected":false},"author":9,"featured_media":7465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"kt_blocks_editor_width":""},"categories":[18],"tags":[],"yoast_head":"\nHow to Add Font Awesome Icons to WordPress Menu without a Plugin : Ready-Made WordPress Marketplace - ReadyShip<\/title>\n<meta name=\"description\" content=\"Find out how to set up a Font Awesome Kit, add icons to your WordPress menu, customize them, and fix potential issues!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Font Awesome Icons to WordPress Menu without a Plugin : Ready-Made WordPress Marketplace - ReadyShip\" \/>\n<meta property=\"og:description\" content=\"Find out how to set up a Font Awesome Kit, add icons to your WordPress menu, customize them, and fix potential issues!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Ready-Made WordPress Marketplace - ReadyShip\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ReadyShip\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-10T05:34:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-10T05:34:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2021\/06\/icons.png\" \/>\n\t<meta property=\"og:image:width\" content=\"980\" \/>\n\t<meta property=\"og:image:height\" content=\"551\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@readyshipco\" \/>\n<meta name=\"twitter:site\" content=\"@readyshipco\" \/>\n<meta name=\"twitter:label1\" value=\"Written by\">\n\t<meta name=\"twitter:data1\" value=\"Radu\">\n\t<meta name=\"twitter:label2\" value=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" value=\"10 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/readyship.co\/blog\/#organization\",\"name\":\"Readyship\",\"url\":\"https:\/\/readyship.co\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/ReadyShip\",\"https:\/\/twitter.com\/readyshipco\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/readyship.co\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2019\/01\/readyship_logo_icon.png\",\"width\":201,\"height\":201,\"caption\":\"Readyship\"},\"image\":{\"@id\":\"https:\/\/readyship.co\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/readyship.co\/blog\/#website\",\"url\":\"https:\/\/readyship.co\/blog\/\",\"name\":\"Readship: WordPress Websites with the Best Hosting\",\"description\":\"Buy\/Sell Subscription Marketplace of beautiful designed WordPress sites with managed hosting, SSL, CDN, 24\/7 supports.\",\"publisher\":{\"@id\":\"https:\/\/readyship.co\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/readyship.co\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2021\/06\/icons.png\",\"width\":980,\"height\":551,\"caption\":\"icons\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#webpage\",\"url\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/\",\"name\":\"How to Add Font Awesome Icons to WordPress Menu without a Plugin : Ready-Made WordPress Marketplace - ReadyShip\",\"isPartOf\":{\"@id\":\"https:\/\/readyship.co\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#primaryimage\"},\"datePublished\":\"2021-06-10T05:34:51+00:00\",\"dateModified\":\"2021-06-10T05:34:54+00:00\",\"description\":\"Find out how to set up a Font Awesome Kit, add icons to your WordPress menu, customize them, and fix potential issues!\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#webpage\"},\"author\":{\"@id\":\"https:\/\/readyship.co\/blog\/#\/schema\/person\/092d749a9bb9e9cb2af8f2532d8e5b45\"},\"headline\":\"How to Add Font Awesome Icons to WordPress Menu without a Plugin\",\"datePublished\":\"2021-06-10T05:34:51+00:00\",\"dateModified\":\"2021-06-10T05:34:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/readyship.co\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#primaryimage\"},\"articleSection\":\"WordPress Tutorials\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/readyship.co\/blog\/add-font-awesome-icons-wordpress-menu-no-plugin\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/readyship.co\/blog\/#\/schema\/person\/092d749a9bb9e9cb2af8f2532d8e5b45\",\"name\":\"Radu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/readyship.co\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fb19726677ad7e3b932bf8b0d9ac7094?s=96&d=mm&r=g\",\"caption\":\"Radu\"},\"description\":\"Hey! I'm Radu, and I've been working with WordPress at personal and professional levels for over 8 years now. I'm a seller on ReadyShip, and I'm also writing posts for their blog, which I hope you'll like. You can find more about me at Radu.link. I'm also quietly on Twitter @RaduWP.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/posts\/7396"}],"collection":[{"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/comments?post=7396"}],"version-history":[{"count":2,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/posts\/7396\/revisions"}],"predecessor-version":[{"id":7487,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/posts\/7396\/revisions\/7487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/media\/7465"}],"wp:attachment":[{"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/media?parent=7396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/categories?post=7396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/readyship.co\/blog\/wp-json\/wp\/v2\/tags?post=7396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}