Always to be in touch with your customers plays a great role, that is why it is important that your visitors could follow you on different social networks to get updated with your latest news. We will show you how to manage the social icons block in Magento 2.
1. Open Magento admin panel and navigate to Stores > Configuration > TemplateMonster > Theme Options.
2. Select the Footer tab to see the Social Links section.
3. You can manage the following social links settings in this area:
Show social links – here you can select the way you want to load social links:
- Image Icon – select it if you want to load your own images for social links.
- Social URL – enter the needed social network link.
- Width – select the desired width of the image.
- Alt Text – the text that will be displayed if the image is not available.
- Image – click on plus (+) and select the image you want to appear for this social link.
- Action – click on a trash icon to remove the social link item.
Font Icon – use this option if you want to use FonAwesome icons for socials:
- CSS Class – Insert css class for FontAwesome Icon from http://fontawesome.io/icons/.
- Social URL – enter the needed social network link
- Font Size – set the needed font size for the icon
- Line Height – set the needed line height for the icon
- Action – press on trash icon to remove the social link item
- Enable/Disable – select whether you want this block to be active or not on the site.
- Social links position – set position for Social links in footer to left, right or center.
4. Press Save Config when you have set the icons up.
The icons can be managed the following way:
1. Open Magento admin panel and navigate to Content > Blocks.
2. Open the block, which is responsible for the social icons display, to Edit. It is usually the footer block.
There you will see the link list like this one:
3. To change the social network link, change the reference between the quotation tags in the href=” ” part.
4. If you want to use another icon for the link, it is enough to change the icon class from fa fa-facebook to the one you need based on the FontAwesome iconic font classes.
5. To add one more icon, duplicate the existing <li> code changing the link and the icon class.
Additional Linked in social icon block:
6. When you are ready, press Save.
