Drupal Technical

[Drupal] How to add social media icons to the footer region in your Drupal sites?

Uttam.kotekar | | 2 min read

In this section we are going to add social media icons with the description to the respective icons in Drupal. Before starting we need to upload and install any responsive theme(I used CoperateClean theme). We will implement this social media icon by creating a block in Drupal configurations and then setting up the cascading style for that block.

Steps to create a social media icons :

Step1: Create a block

Create a block and add a new block with body as ul and li tags of social icons image wrapped with anchor tag and add a description within li tag. Below is code to be written in body. Set the body page to FULL HTML and set region to the footer region.

<ul>
  <li><a href="http://www.facebook.com/?"><img src="sites/all/themes/corporateclean/images/social-media-facebook.png" /></a>Follow us on Facebook</li>
  <li><a href="http://www.linkedin.com"><img src="sites/all/themes/corporateclean/images/social-media-linkedin.png" /></a>Follow us on linkedin</li>
  <li><a href="https://twitter.com/"><img src="sites/all/themes/corporateclean/images/social-media-twitter.png" /></a>Follow us on twitter</li>
</ul>

Remember to change the URLs in the anchor tags to point to your social media profiles in each of these social media platforms.

This will create a added a block with social media icons with the description.

Step2: Styling the block

Below is the css code for styling the social media icons to the top right area(style.css).

#block-block-1.block-block {
  float:right;
  height: 24px;
}

#block-block-1 li {
  list-style : none;
  padding-bottom : 15px;
  color: #ffffff;
  font-weight : bolder;
  font-style : italic; 
}

#block-block-1 li a {
  float :left;
}

#block-block-1 li a img {
  padding-right : 15px;
}

The above code will do styling the social media block. Now you'll find your social media icons in the footer region with description.

 

 

Related Topics