How do I add social media icons in the contact area – Web & Digital Help Center

Instructions

1. Open the _contact.inc page in the CMS.

2. Click on the HTML button.

3. With the dialog box open, press "enter" a few times on your keyboard to give yourself space and then paste the icon code into the dialog box. The code can be found at the bottom of this page. In the example below, I copied the code for the Facebook icon.

4. Go to your social media profile page and copy the URL. In the example below, I went to the MSU Facebook page.

5. Locate the href="#" in the icon code from step 3. Delete the pound symbol (while keeping the quotes) and paste the social media URL in the quotes. the code should now look similar to href="https://www.facebook.com/montanastate".

6. Repeat steps 3 to 5 for any other icons you would like to add.

7. Press the update button at the bottom of the dialog. Don't worry if you only see the words Facebook or Twitter, the icons will appear on the front-end once you publish. Save and publish the contact.inc page.

The code

Facebook

<!--Start of Facebook icon-->
    <a class="fa-msu-socialicon" title="Facebook" href="#">
        <span class="fa fa-facebook-square">
            <span class="sr-only">Facebook</span>
        </span>
    </a>
<!--End of Facebook icon-->

Twitter

<!--Start of Twitter icon-->
    <a class="fa-msu-socialicon" title="Twitter" href="#">
        <span class="fa fa-twitter-square">
            <span class="sr-only">Twitter</span>
        </span>
    </a>
<!--End of Twitter icon-->

YouTube

<!--Start of YouTube icon-->
 <a class="fa-msu-socialicon" title="YouTube" href="#">
 <span class="fa fa-youtube-square">
 <span class="sr-only">YouTube</span>
 </span>
 </a>
<!--End of YouTube icon-->

Instagram

<!--Start of Instagram icon-->
 <a class="fa-msu-socialicon" title="Instagram" href="#">
 <span class="fa fa-instagram">
 <span class="sr-only">Instagram</span>
 </span>
 </a>
<!--End of Instagram icon-->

<!--Start of Pinterest icon-->
 <a class="fa-msu-socialicon" title="Pinterest" href="#">
 <span class="fa fa-Pinterest-square">
 <span class="sr-only">Pinterest</span>
 </span>
 </a>
<!--End of Pinterest icon-->

More help

If you need more help, or if the instructions were unclear, please submit a ticket.