{"id":64773,"date":"2016-02-25T03:33:30","date_gmt":"2016-02-25T08:33:30","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=64773"},"modified":"2016-04-07T10:50:20","modified_gmt":"2016-04-07T14:50:20","slug":"landing-page-how-to-manage-social-icons","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/landing-page-how-to-manage-social-icons.html","title":{"rendered":"Landing Page. How to manage social icons"},"content":{"rendered":"

This video tutorial will show how to manage social icons<\/strong> in the Landing Page template.<\/p>\r\n\r\nLanding Page. How to manage social icons<\/a>\r\n\r\n

In order to manage icons, you should perform the following steps:<\/strong><\/p>\r\n\r\n

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

    First, search for the element in order to find out its class by using Firebug tool<\/strong> that can be enabled with the right click<\/strong> on the screen and selecting Inspect Element<\/strong> from the drop down menu:<\/p>\r\n\r\n\"Landing-Page.-How-to-manage-social-icons\"<\/a>\r\n\t<\/li>\r\n\t\r\n\t

  2. \r\n\t\t

    Check the CSS class<\/strong> for the icon that has to be changed.<\/p> \r\n\t<\/li>\r\n\t\r\n\t

  3. \r\n\t\t

    Get back to the \u2018site\/css\/material-design.css\u2019 file<\/strong> and search for the value you\u2019d like to use instead of default one.<\/p>\r\n\t<\/li>\r\n\t\r\n\t

  4. \r\n\t\t

    Open style.css<\/strong> file located in css folder<\/strong> of your template. Paste the CSS class for the icon to the bottom of the file and make sure it has \u2018content\u2019 line<\/strong> value:<\/p> \r\n\r\n\"Landing-Page.-How-to-manage-social-icons-2\"<\/a>\r\n\t<\/li>\r\n\t\r\n\t\r\n\r\n\"Landing-Page.-How-to-manage-social-icons-6\"<\/a>\r\n\t\t

  5. Paste the new content value to the style.css file. Remember to use \u2018!important\u2019<\/strong> to apply CSS modification properly. The final CSS class should look as follows:<\/p>\r\n\t\t\r\n\t\t

    \r\n\t\t.booking_form .mfIcon span::before {\r\n\t\tcontent: \"\\e009\" !important;\r\n\t\t}<\/pre>\r\n\t<\/li>\r\n\t\r\n<\/ol>\r\n\r\n
    You can also change social icons by following such steps:<\/strong><\/p>\r\n
      \t\r\n\t
    1. \r\n\t\t
      First, search for the element in order to find out its class by using Firebug tool<\/strong> that can be enabled with the right click on the screen and selecting Inspect Element<\/strong> from the drop down menu:<\/p> \r\n\r\n\"Landing-Page.-How-to-manage-icons-4\"<\/a>\r\n\t\t\r\n\t<\/li>\r\n\t\r\n\t
    2. \r\n\t\t
      In order to replace social icon, you need to open an appropriate .html file<\/strong>. You can see file name in the browser bar. In our case we need index.html<\/strong>:<\/p>\r\n\r\n\"Landing-Page.-How-to-manage-social-icons-5\"<\/a>\r\n\t<\/li>\r\n\t\t\r\n\t
    3. \r\n\t\t
      Search for the footer area<\/strong> and find a piece of html code used for Instagram, as an example. Replace the title Instagram with Pinterest:<\/p> \r\n\t<\/li>\r\n\t
    4. \r\n\t\t
      The last step is changing Fontawesome icon, used for Instagram. Open the following link: https:\/\/fortawesome.github.io\/Font-Awesome\/icons\/<\/a>. There you can see the list of all icons and their classes. We need to copy the class name of the icon<\/strong> we are interested in and paste it instead<\/strong> of Instagram class. It will be fa fa-pinterest for us:<\/p>\r\n\r\n\"Landing-Page.-How-to-manage-social-icons-6\"<\/a>\r\n\t<\/li>\r\n\t\r\n\t
    5. \r\n\t\t
      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:<\/p> \r\n\t<\/li>\r\n\t\r\n\t
    6. \r\n\t\t
      Go back to your website and refresh page with text that you have changed. Now we can see that editing was successful. <\/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\nLanding Page. How to manage social icons<\/a>","protected":false},"excerpt":{"rendered":"
      This video tutorial will show how to manage icons<\/strong> in the Landing Page template.<\/p>\n","protected":false},"author":96,"featured_media":64835,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2039],"tags":[674,2080,860],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/64773"}],"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\/96"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=64773"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/64773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/64835"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=64773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=64773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=64773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}