Categories

Featured templates

CherryFramework 3. How to change logo and logo icon

Sandra Kim October 26, 2015
Rating: 4.0/5. From 3 votes.
Please wait...

This tutorial provides an explanation of how to change logo and logo icon in WordPress CherryFramework3 template.

CherryFramework 3. How to change logo and logo icon

In order to change your logo, you should perform the following steps:

  1. Log into your WordPress admin panel and navigate to Cherry Options -> Cherry Options -> Logo & Favicon tab.

  2. Locate the Logo Image Path option and remove the current logo. Once you have done it, you should see the Upload button:

    Navigate_to_Cherry_Options_Logo_Favicon_tab

  3. Click on the Upload button (or enter the direct path to your logo image) and upload your new logo either from your computer or from Media Library (if you already have it there):

    Upload_new_logo_image

  4. Press the Select button and you will see that your logo image has a new path now:

    Select_uploaded_logo_image

  5. Click on the Save Options button in order to save your new logo image:

    Press_Save_Options_to_save_logo_image

    Also, you can always get back the original logo by using the Restore Defaults button.

  6. Refresh your website and check your new logo image.

In order to change your logo icon, you should perform the following steps:

  1. Logo icon is usually set with CSS by using FontAwesome iconic fonts. Inspect it by using a developer tool, for example Firebug (for Mozilla Firefox) to check how it is set up:

    FontAwesome_icon_CSS_rule

  2. In our case we can see that the icon itself is set by using this CSS selector:

    					.logo::before
    				

    You need to copy it and go back to your WordPress admin panel.

  3. Navigate to Appearance -> Editor and paste the copied CSS selector to the style.css file of your child theme:

    Paste_code_under_Appearance_Editor

    You can also edit this file via your cPanel or FTP by using your favorite code editor (like Notepad++, Dreamweaver, etc.).

  4. You should choose the icon you would like to use and find its respective code in order to set up your CSS rule. Before doing it, first of all you need to know the appropriate version of the FontAwesome icons. You can check it with Firebug:

    Find_out_FontAwesome_version

    In our case the FontAwesome icons of version 3.2.1 are getting used in the template (this is actually what r=3.2.1 means).

  5. You can use FontAwesome 3.2.1 cheatsheet in order to pick the icon. Also, you can look for the icons of the appropriate version of FontAwesome by using search engines:

    Search_for_FontAwesome_cheatsheet

  6. Once you have picked the icon, you will need to find its appropriate code to complete your CSS rule. Let’s choose the icon-film to replace the current one with.

  7. In order to find its code, go back to your website and open Firebug once again. You will see the reference to the external FontAwesome CSS file. Right click on it and select Open in New Tab option:

    Open_FontAwesome_CSS_file_in_New_tab

  8. When it is opened, use the search tool of browser (Ctrl+F) in order to find the icon by its name. For icon-film the code looks like that:

    					.icon-film:before {
    					  content: "\f008";
    					}
    				
  9. You need to copy the content property and its value:

    Locate_icon_CSS_code

  10. Once you have copied it, go back to your style.css file and paste the copied code to your CSS rule. Also, add !important directive to your CSS declaration in order to overwrite the existing style. Eventually your code should look like that:

    					.logo::before {
    					  content: "\f008" !important;
    					}
    				

    Create_CSS_rule_for_new_icon

  11. Also, you can modify your new icon in order to fit your needs so that you can change its color, font, position, etc. Let’s change its color to white thus our final code will look like that:

    					.logo::before {
    					  content: "\f008" !important;
    					  color: #ffffff !important;
    					}
    				
  12. Press the Update File button (or upload your edited file back to the server) in order to save your changes:

    Final_CSS_icon_code

  13. Refresh the website and check your new logo icon.

Now you know how to change logo and logo icon in WordPress CherryFramework3 template.

Feel free to check the detailed video tutorial below:

CherryFramework 3. How to change logo and logo icon

Best Wordpress Premium Themes
This entry was posted in WordPress Tutorials and tagged CherryFramework3, icon, logo. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket