{"id":55573,"date":"2015-10-13T02:53:07","date_gmt":"2015-10-13T06:53:07","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=55573"},"modified":"2017-08-17T06:04:06","modified_gmt":"2017-08-17T10:04:06","slug":"cherryframework-4-how-to-change-font-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-change-font-icons.html","title":{"rendered":"CherryFramework 4. How to change font icons"},"content":{"rendered":"

This tutorial shows how to change font icons <\/strong>in CherryFramework 4.<\/p>\r\nCherryFramework 4. How to change font icons<\/a>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n

There are several types of iconic fonts that might be used in CherryFramework 4. They are Font Awesome and Material Design icons. Use ‘Inspect element’ <\/strong>tool to check the specific one in your case. The font reference shows up under ‘font-family’ css line<\/strong>:<\/p>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_1\"<\/a>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_2\"<\/a>\r\n

Font Awesome<\/h3>\r\n

Font Awesome is usually used for the icons. You can replace original icons with new ones using Dashboard options:<\/p>\r\n

    \r\n
  1. \r\n

    Open the post\/page where icon should be replaced.<\/p>\r\n

    NOTE:<\/strong> make sure to use Visual editor for editing.<\/p>\r\n <\/li>\r\n

  2. \r\n

    Scroll down the content to locate required piece of text where Font Awesome is used. The reference to the used icon will be within [cherry_icon]<\/strong> shortcode, for example: [cherry_icon icon="icon: fa fa-group" size="48" color="#ffffff"]\t\t\t\t<\/strong><\/p>\r\n

    Click ‘Insert shortcode’ button<\/strong> on top of the page to replace default icon with another one:<\/p>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_3\"<\/a>\r\n <\/li>\r\n

  3. \r\n

    Select ‘Icon’ type<\/strong> there. You will get a form with the ‘Icon picker’<\/strong> to use. This tab specifically opens a list of available Font Awesome icons. Select the one you prefer to be used in a page:<\/p>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_4\"<\/a>\r\n

    ‘Media manager’ button<\/strong> allows you to upload custom image to be used as an icon.<\/p>\r\n

    Update icon settings (icon size, color, CSS style class), so they match required layout of your page. Click ‘Insert shortcodes’ <\/strong>button once done editing. This places new icon to the page content.<\/p>\r\n <\/li>\r\n

  4. \r\n

    Delete the shortcode for the old icon<\/strong> and update changes to the page.<\/p>\r\n <\/li>\r\n<\/ol>\r\n

    Flat Icons<\/h3>\r\n

    There are icons created with different font than Font Awesome. Use ‘Inspect element’ tool <\/strong>to check the used font. Let’s use fl-continuous font icons<\/strong> as an example:<\/p>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_1\"<\/a>\r\n

    Icons of this type are updated in a different way:<\/p>\r\n\r\n

      \r\n
    1. \r\n

      Use ‘Inspect Element’ <\/strong>tool first and locate CSS class for the specific icon. Copy the CSS class:<\/p>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_5\"<\/a>\r\n <\/li>\r\n\t

    2. \r\n

      Open Dashboard> Appearance> Editor> theme####> style.css <\/strong>file. Paste the copied CSS class there. Put it to the bottom of the file, below the content it currently contains. <\/p>\r\n <\/li>\r\n\t

    3. \r\n

      Now open server files (use hosting cPanel or FTP for that). Locate \/wp-content\/themes\/theme#####\/assets\/css\/ <\/strong>folder there. You’ll see CSS files for the custom iconic fonts. Open the one for fl-continuous – "fl-continuous.css" <\/strong>file.<\/p>\r\n\t<\/li>\r\n\t

    4. \r\n

      List of the available icons and content for them shows up. Locate the icon you’d like to use there and copy its content value<\/strong>.<\/p>\r\n\t<\/li>\r\n\t

    5. \r\n

      Get back to the style.css file in Dashboard<\/strong>. Replace the previous icon content with the new one.<\/p>\r\n

      Note:<\/strong> make sure to use ‘!important’ <\/strong> at the end of the line to apply the change:<\/p>\r\n\r\n\"CherryFramework-4_How_to_change_iconic_fonts_icons_6\"<\/a>\r\n\t<\/li>\r\n\t

    6. \r\n\t

      Update changes to the file. Get back to the site’s front-end to view the result.<\/p>\r\n\t<\/li>\r\n<\/ol>\r\n\r\n

      Custom Icon Fonts<\/h3>\r\n

      In case you’d like to place some custom icon font, some additional steps are required. <\/p>\r\n

        \r\n\t
      1. \r\n\t\t

        Download the files for the new icons font and upload them to the following directory: ‘wp-content\/themes\/themeXXXXX\/assets\/fonts’<\/strong>.<\/p>\r\n\t<\/li> \r\n\t

      2. \r\n\t\t

        Upload CSS file of the custom iconic font <\/strong>to the ‘wp-content\/themes\/themeXXXXX\/assets\/css’ <\/strong>folder in the server.<\/p>\r\n\t<\/li>\r\n\t

      3. \r\n\t\t

        Open ‘wp-content\/themes\/themeXXXXX\/functions.php<\/strong>‘ file. Locate the following piece of code:<\/p>\r\n\t\t\t

        \r\nadd_filter( 'cherry_custom_font_icons', 'themeXXXX_custom_font_icons' );\r\nfunction themeXXXXX_custom_font_icons($icons) {\r\n $icons['themeXXXXX_flat_icon_continuous'] = get_stylesheet_directory_uri() . '\/assets\/css\/fl-continuous.css';\r\n $icons['themeXXXXX_flat_icon_justicons'] = get_stylesheet_directory_uri() . '\/assets\/css\/fl-justicons.css';\r\n $icons['themeXXXXX_flat_icon_arrows'] = get_stylesheet_directory_uri() . '\/assets\/css\/arrows.css';\r\n return $icons;\r\n}\r\n\t\t\t<\/pre>\r\n\t<\/li>\r\n\t
      4. Edit that with the line for the custom iconic font:\r\n  
        $icons['themeXXXXX_custom_font_name] = get_stylesheet_directory_uri() . '\/assets\/css\/path-to-icon-font.css';<\/pre>\r\n\t\t
        custom_font_name<\/strong> should be replaced with the actual name of the new font. <\/p>\r\n\t\t
        path-to-icon-font.css<\/strong> should be replaced with the actual name for the CSS file from the ‘assets\/css’ folder. <\/p>\r\n\t<\/li>\r\n\t
      5. \r\n\t\t
         Update changes to the file. Next you can use the new iconic font in the same way as for the Flat Icons. <\/p>\r\n\t<\/li>\r\n<\/ol>\r\n\r\n
        Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nCherryFramework 4. How to change font icons<\/a>","protected":false},"excerpt":{"rendered":"
        This tutorial shows how to change font icons <\/strong>in  CherryFramework 4.<\/p>\n","protected":false},"author":66,"featured_media":55582,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,688,1761,674,1736],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55573"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=55573"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55573\/revisions"}],"predecessor-version":[{"id":82824,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/55573\/revisions\/82824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/55582"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=55573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=55573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=55573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}