Categories

Landing Page. How to manage social icons

Jill Sunders February 25, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

This video tutorial will show how to manage social icons in the Landing Page template.

Landing Page. How to manage social icons

In order to manage icons, you should perform the following steps:

  1. First, search for the element in order to find out its class by using Firebug tool that can be enabled with the right click on the screen and selecting Inspect Element from the drop down menu:

    Landing-Page.-How-to-manage-social-icons
  2. Check the CSS class for the icon that has to be changed.

  3. Get back to the ‘site/css/material-design.css’ file and search for the value you’d like to use instead of default one.

  4. Open style.css file located in css folder of your template. Paste the CSS class for the icon to the bottom of the file and make sure it has ‘content’ line value:

    Landing-Page.-How-to-manage-social-icons-2
  5. Landing-Page.-How-to-manage-social-icons-6
  6. Paste the new content value to the style.css file. Remember to use !important to apply CSS modification properly. The final CSS class should look as follows:

    		.booking_form .mfIcon span::before {
    		content: "\e009" !important;
    		}

You can also change social icons by following such steps:

  1. First, search for the element in order to find out its class by using Firebug tool that can be enabled with the right click on the screen and selecting Inspect Element from the drop down menu:

    Landing-Page.-How-to-manage-icons-4
  2. In order to replace social icon, you need to open an appropriate .html file. You can see file name in the browser bar. In our case we need index.html:

    Landing-Page.-How-to-manage-social-icons-5
  3. Search for the footer area and find a piece of html code used for Instagram, as an example. Replace the title Instagram with Pinterest:

  4. The last step is changing Fontawesome icon, used for Instagram. Open the following link: https://fortawesome.github.io/Font-Awesome/icons/. There you can see the list of all icons and their classes. We need to copy the class name of the icon we are interested in and paste it instead of Instagram class. It will be fa fa-pinterest for us:

    Landing-Page.-How-to-manage-social-icons-6
  5. Replace fa fa-instagram with fa fa-pinterest. In the same way you may easily replace a default # sign with any URL you need. Save changes and refresh your website:

  6. Go back to your website and refresh page with text that you have changed. Now we can see that editing was successful.

Feel free to check the detailed video tutorial below:

Landing Page. How to manage social icons
Landing Page Design Inspiration
This entry was posted in Landing Page Tutorials and tagged icon, Landing Page, social. 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