Tutorial & code

Social Icons

A wide collection of styles social icons using the Beaver Builder HTML module.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Bb Vid Cs

Notes

This is a collection of socials icons with different CSS styles in individual HTML Modules.

  1.  Drag the social icons row to your page
  2. Move the selected module to a new row and delete the socials icons row.
  3.  Go to the General tab of the module and delete the unneeded lines of code.
  4. Where it says href=”#” replace the # with your URL.
  5. If the module has individual colors for each social icon you can go to the Advanced tab and delete unneeded code there.

Beaver Builder Social Icons Module1

See the Social Icons template in action.

Code

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href="https://www.facebook.com/groups/beaverbuilderbeginners" target="_blank" title="Facebook" class="fa fa-facebook"><span>Facebook</span></a>
<a href="https://twitter.com/beaverbuilder" target="_blank" title="Twitter" class="fa fa-twitter"><span>Twitter</span></a>
<a href="#" target="_blank" title="Google" class="fa fa-google"> <span>Google</span></a>
<a href="#" target="_blank" title="Linkedin" class="fa fa-linkedin"><span>Linkedin</span></a>
<a href="#" target="_blank" title="YouTube" class="fa fa-youtube"><span>YouTube</span></a>
<a href="#" target="_blank" title="Instagram" class="fa fa-instagram"><span>Instagram</span></a>
<a href="#" target="_blank" title="Pinterest" class="fa fa-pinterest"><span>Pinterest</span></a>
<a href="#" target="_blank" title="Snapchat" class="fa fa-snapchat-ghost"><span>Snapchat</span></a>
<a href="#" target="_blank" title="Skype" class="fa fa-skype"><span>Skype</span></a>
<a href="#" target="_blank" title="Android" class="fa fa-android"><span>Android</span></a>
<a href="#" target="_blank" title="Dribbble" class="fa fa-dribbble"><span>Dribbble</span></a>
<a href="#" target="_blank" title="Vimeo" class="fa fa-vimeo"><span>Vimeo</span></a>
<a href="#" target="_blank" title="Tumblr" class="fa fa-tumblr"><span>Tumblr</span></a>
<a href="#" target="_blank" title="Vine" class="fa fa-vine"><span>Vine</span></a>
<a href="#" target="_blank" title="Foursquare" class="fa fa-foursquare"><span>Foursquare</span></a>
<a href="#" target="_blank" title="Stumbleupon" class="fa fa-stumbleupon"><span>Stumbleupon</span></a>
<a href="#" target="_blank" title="Flickr" class="fa fa-flickr"><span>Flickr</span></a>
<a href="#" target="_blank" title="Yahoo" class="fa fa-yahoo"><span>Yahoo</span></a>
<a href="#" target="_blank" title="Reddit" class="fa fa-reddit"><span>Reddit</span></a>
<a href="#" target="_blank" title="Trip Advisor" class="fa fa-tripadvisor"><span>Trip Advisor</span></a>
<a href="#" target="_blank" title="Soundcloud" class="fa fa-soundcloud"><span>Soundcloud</span></a>
<a href="#" target="_blank" title="Amazon" class="fa fa-amazon"><span>Amazon</span></a>
<a href="#" target="_blank" title="Slack" class="fa fa-slack"><span>Slack</span></a>
<a href="#" target="_blank" title="MeetUp" class="fa fa-meetup"><span>MeetUp</span></a>


CSS

/* You can remove the brand colors there are not needed.
i.e. to remove Google delete this:

.fa-google {
background: #dd4b39;
color: white;
}

*/

a span
{ display:none}

.fa {
padding: 20px;
font-size: 20px;
width: 60px;
height: 60px;
text-align: center;
text-decoration: none;
margin: 5px 5px;
border-radius: 100%;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

.fa-instagram {
background: #125688;
color: white;
}

.fa-pinterest {
background: #cb2027;
color: white;
}

.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
background: #00aff0;
color: white;
}

.fa-android {
background: #a4c639;
color: white;
}

.fa-dribbble {
background: #ea4c89;
color: white;
}

.fa-vimeo {
background: #45bbff;
color: white;
}

.fa-tumblr {
background: #2c4762;
color: white;
}

.fa-vine {
background: #00b489;
color: white;
}

.fa-foursquare {
background: #45bbff;
color: white;
}

.fa-stumbleupon {
background: #eb4924;
color: white;
}

.fa-flickr {
background: #f40083;
color: white;
}

.fa-yahoo {
background: #430297;
color: white;
}

.fa-soundcloud {
background: #ff5500;
color: white;
}

.fa-reddit {
background: #ff5700;
color: white;
}

.fa-rss {
background: #ff6600;
color: white;
}

.fa-tripadvisor {
background: #00AF87;
color: white;
}

.fa-soundcloud
{
background: #FE5000;
color: white;
}
.fa-amazon
{
background: #FF9900;
color: white;
}

.fa-slack
{
background: #000;
color: white;
}

.fa-meetup
{
background: #e0393e;
color: white;
}

 

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment