Social Media Icons

This example uses an icon font from Icomoon and sets the social links from Page Content. There is an example social icon font in the A0000 HTML Folder Template on the Projects drive.

Coldfusion code 

<!--- Set the page content node containing your social media links here --->
<cfset request.pc_node_social = 2>
<div class="social-links">
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_1'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_1')#</cfoutput>" target="_blank"><span class="ico-envelope"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_2'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_2')#</cfoutput>" target="_blank"><span class="ico-facebook-square"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_4'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_4')#</cfoutput>" target="_blank"><span class="ico-instagram"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_3'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_3')#</cfoutput>" target="_blank"><span class="ico-twitter"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_5'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_5')#</cfoutput>" target="_blank"><span class="ico-youtube"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_6'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_6')#</cfoutput>" target="_blank"><span class="ico-vimeo"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_7'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_7')#</cfoutput>" target="_blank"><span class="ico-linkedin"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_8'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_8')#</cfoutput>" target="_blank"><span class="ico-pinterest-p"></span></a></cfif>
  <cfif len(pcValue('pcItem_#request.pc_node_social#_1_9'))><a class="social" href="<cfoutput>#pcValue('pcItem_#request.pc_node_social#_1_9')#</cfoutput>" target="_blank"><span class="ico-rss-square"></span></a></cfif>
</div>

CSS 

.social-links {
  text-align: left;
}

.social-links a.social {
  display: inline-block;
  margin-right: 20px;
  font-size: 30px;
  color: #fff;
  vertical-align: middle;
  transition: .2s ease-out;
}

.social-links a:focus,
.social-links a:hover {
  color: #fff;
  opacity: .8;
}