3.0 Footer Tip: Add Social Icons Using Icon Font and No Javascript

Hey Ningers, here is a simple yet elegant and modern social footer featuring entypo icon font and long-shadow icon design. The whole thing requires no javascript or images and we may learn something new together. What we are building is the following, using an icon font:

Minor NOTE: You do not have to have 2 rows of icons. If you'd just like one row, I'll explain below

The HTML for the Page Footer: [All Code Attached at Bottom as TXT File]

STEP ONE: Copy this code to a text document and find/replace all instances of [YOUR NETWORK] and yournetwork.ning.com with your own URLs and Network Name. Basically change all links to go to the pages on your network which the icon represents. THEN, Place this in the above Footer Section of your Pages Manager:

Like So:

STEP TWO: Place This in your Top Section of your Custom Code Page at the top:

STEP THREE: Add this Code to the Advanced Section of CSS:

/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.jffooter {
padding: 20px 0;
text-align: center;
}

.jfsocial {
display: inline-block;
width: 70px;
height: 70px;
margin: 0 10px;
line-height: 70px;
font-family: Entypo;
font-size: 35px;
text-align: center;
color: #bbb;
border-radius: 50%;
background: #eee;
overflow: hidden;
transition: color .3s;
}

.jfsocial:hover {
color: #000;
cursor: pointer;
}

.jfsocial {
box-shadow: rgb(210, 210, 210) 1px 1px,
    rgb(210, 210, 210) 2px 2px,
    rgb(211, 211, 211) 3px 3px,
    rgb(211, 211, 211) 4px 4px,
    rgb(211, 211, 211) 5px 5px,
    rgb(212, 212, 212) 6px 6px,
    rgb(212, 212, 212) 7px 7px,
    rgb(212, 212, 212) 8px 8px,
    rgb(213, 213, 213) 9px 9px,
    rgb(213, 213, 213) 10px 10px,
    rgb(214, 214, 214) 11px 11px,
    rgb(214, 214, 214) 12px 12px,
    rgb(214, 214, 214) 13px 13px,
    rgb(215, 215, 215) 14px 14px,
    rgb(215, 215, 215) 15px 15px,
    rgb(215, 215, 215) 16px 16px,
    rgb(216, 216, 216) 17px 17px,
    rgb(216, 216, 216) 18px 18px,
    rgb(216, 216, 216) 19px 19px,
    rgb(217, 217, 217) 20px 20px,
    rgb(217, 217, 217) 21px 21px,
    rgb(218, 218, 218) 22px 22px,
    rgb(218, 218, 218) 23px 23px,
    rgb(218, 218, 218) 24px 24px,
    rgb(219, 219, 219) 25px 25px,
    rgb(219, 219, 219) 26px 26px,
    rgb(219, 219, 219) 27px 27px,
    rgb(220, 220, 220) 28px 28px,
    rgb(220, 220, 220) 29px 29px,
    rgb(221, 221, 221) 30px 30px;
   text-shadow: rgb(226, 226, 226) 1px 1px,
    rgb(227, 227, 227) 2px 2px,
    rgb(227, 227, 227) 3px 3px,
    rgb(228, 228, 228) 4px 4px,
    rgb(229, 229, 229) 5px 5px,
    rgb(229, 229, 229) 6px 6px,
    rgb(230, 230, 230) 7px 7px,
    rgb(230, 230, 230) 8px 8px,
    rgb(231, 231, 231) 9px 9px,
    rgb(232, 232, 232) 10px 10px,
    rgb(232, 232, 232) 11px 11px,
    rgb(233, 233, 233) 12px 12px,
    rgb(233, 233, 233) 13px 13px,
    rgb(234, 234, 234) 14px 14px,
    rgb(235, 235, 235) 15px 15px,
    rgb(235, 235, 235) 16px 16px,
    rgb(236, 236, 236) 17px 17px,
    rgb(236, 236, 236) 18px 18px,
    rgb(237, 237, 237) 19px 19px,
    rgb(238, 238, 238) 20px 20px;
}

Further Customization:

If you only want one or threee row of icons, simply remove or add one entire block of links like so:

If you'd like to change the hover color of the links, change the value(s) in red (above) with the HEX code for the color you want. The first red color is the color of icon before hover and the second red color is the one it changes to on hover..

Want to Change out the Icons? Entypo has hundreds of icons to choose from. Simply head to the Character Map for Entypo and change out the unicode for the icon with the one you prefer. For example: To change the icon for Facebook to one for Tumblr, simply change  to  in the HTML portion.

I will be adding more customization options to this page on my project site under "Ning Tips". Enjoy!

Replies

NC for Hire

⚡JFarrow⌁ March 30, 2014 at 7:29pm

just as an exercise, I pretended that I had never done this before and followed my own tip to add slightly modified version of this to the bottom of Beautiful Nation Project as a demo.
- Jelena > ⚡JFarrow⌁ March 30, 2014 at 10:13pm
  
  Dear JF what do you mean "Add Yourself to member Map" ? :) This piece of code is awesome. I wanna try. Thank you JF.
  - NC for Hire
    
    ⚡JFarrow⌁ > Jelena March 30, 2014 at 10:29pm
    
    that was about the point where i decided to make this tip/ template for everyone..that "Add yourself to member map" is merely a suggestion because i have a mapping group on my network which is separate from member map.... everything in there should be customized to your liking.. this is just a template to find/replace and try different things out.. the icons are all changable as well..
    
    enjoy!
Fire-Tech March 31, 2014 at 4:18pm

Pretty slick bro..have to play with this one
- NC for Hire
  
  ⚡JFarrow⌁ > Fire-Tech April 1, 2014 at 2:11pm
  
  Nice FT... glad you like it...let me know how it turns out!
Willerie Razote April 1, 2014 at 1:01am

This is great--JFarrow--thanks! I'm going to try it out!
- NC for Hire
  
  ⚡JFarrow⌁ > Willerie Razote April 1, 2014 at 2:10pm
  
  Thank you Willerie
This reply was deleted.
- NC for Hire
  
  ⚡JFarrow⌁ April 1, 2014 at 2:10pm
  
  thank you brother. Glad you found it useful...
NC for Hire

⚡JFarrow⌁ April 1, 2014 at 2:10pm

Just updated the CSS portion with another color change option. Portions in red can be easily changed to reflect colors on your site. Like so...
soaringeagle April 2, 2014 at 1:47pm

i like it but it has an extremely exagerated drop shadow i want to reduce