Skip to main content

Straight-forward Pure CSS Social Icons

This is a chunk of code I use on a lot of sites.  It uses Font Awesome to supply the fonts, but everything else is handled via CSS.

Font Awesome

To start, you'll need a Font Awesome account / link to use to import your font files (which will be used to show the social network icons).

They will provide you with a script link you can put into your header.php, load into your functions.php and/or download locally and link locally...really, it's up to you how you load the script.

The HTML code is just a simple list:

<ul class="social-media-icons">
<li><a class="facebookBtn smGlobalBtn" href="https://www.facebook.com/yoursitehere" target="_blank"></a></li>
<li><a class="linkedinBtn smGlobalBtn" href="https://www.linkedin.com/in/yoursitehere" target="_blank"></a></li>
<li><a class="twitterBtn smGlobalBtn" href="https://twitter.com/yoursitehere" target="_blank"></a></li>
<li><a class="youtubeBtn smGlobalBtn" href="https://www.youtube.com/user/yoursitehere" target="_blank"></a></li>
<li><a class="pinterestBtn smGlobalBtn" href="https://www.pinterest.ca/yoursitehere" target="_blank"></a></li>
<li><a class="instagramBtn smGlobalBtn" href="https://www.instagram.com/yoursitehere" target="_blank"></a></li>
<li><a class="mailBtn smGlobalBtn" href="mailto:youremailaddresshere.com" target="_blank"></a></li>
<li><a class="webBtn smGlobalBtn" href="https://webaddresshere/" target="_blank"></a></li>
</ul>

The CSS

Copy and paste the code below into your style sheet.  Colours are in there and can be adjusted as needed.


ul.social-media-icons{
  padding-bottom:0;
  padding-left:0!important;
}
ul.social-media-icons li{
  display:inline-block;
}

.smGlobalBtn { /* global button class */
    vertical-align:top;
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
    padding: 0px;
    text-decoration: none;
    text-align: center;
    color: #06357a;
    font-size: 30px;
    font-weight: normal;
    line-height: 40px;
    border-radius: 50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    margin-left:5px;
    margin-right:
    transition:all 300ms;
}


.et-fixed-header .contact-info .smGlobalBtn {
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 10px;
  margin-left:5px;
  margin-bottom:0;
}

.facebookBtn, .youtubeBtn, .twitterBtn, .linkedinBtn, .instagramBtn, .pinterestBtn, .mailBtn, .webBtn{
  background: #FFF;
}


.facebookBtn:before, .youtubeBtn:before, .twitterBtn:before, .linkedinBtn:before, .instagramBtn:before, .pinterestBtn:before, .mailBtn:before, .webBtn:before{
  font-family: "FontAwesome";
  color:#06357a;
}


/* facebook button class*/
.facebookBtn:before{ /* use :before to add the relevant icons */
  content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
  background: #a2daf4;
}
/* youtube button class*/
.youtubeBtn:before{ 
  content: "\f167"; /* add youtube icon */
}
.youtubeBtn:hover{
  background: #a2daf4;
}
/* twitter button class*/
.twitterBtn:before{
  content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
  background: #a2daf4;
}
/* linkedin button class*/
.linkedinBtn:before{
  content: "\f0e1"; /* add linkedin icon */
}
.linkedinBtn:hover{
  background: #a2daf4;
}
/* instagram button class */

.instagramBtn:before{
  content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
  background: #a2daf4;
}

.pinterestBtn:before{
  content: "\f0d2"; /* add pinteresticon */
}
.pinterestBtn:hover{
  background: #a2daf4;
}

.mailBtn:before{
  content: "\f0e0"; /* add mail icon */
}
.mailBtn:hover{
  background: #a2daf4;
}
.webBtn:before{
  content: "\f0ac"; /* add web link icon */
}
.webBtn:hover{
  background: #a2daf4;
}

Labels:

Comments

Post a Comment

Popular posts from this blog

How To Run Chrome From Within Notepad++

If you have recently tried to Run  Chrome from within Notepad++ recently, you've probably encountered the same issue I did.  Chrome didn't run. The fix is actually really simple.  Open up the Run box in Notepad++ and browse to your installation of Chrome. ie.  C:\Program Files\Google\Chrome\Application\Chrome.exe Select the file when you find it.  Now, the trick is: Put quotation marks around the path you see in the Run  box.  Now, put 1 space after the closing quotation mark. Type this: $(FULL_CURRENT_PATH) It'll look something like this: Click Run .  If Chrome opens, click Save and set your hotkey.
15 comments
 Developers - Read More...

Developer Note: Virtuemart - Editing the Add to Cart MooTool Popup

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about. These are the files to know \components\com_virtuemart\themes\default\theme.js \components\com_virtuemart\js\mootools\   - contains the files for editing the appearance of the popup. To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)
8 comments
 Developers - Read More...

Failed to load resource: the server responded with a status of 412 - Fix

Recently, I ran into an issue with a Divi install I was running on a new server.  For whatever reason, it suddenly wasn't loading any of the scripts necessary. I tried rolling back the theme, but that didn't do anything.  I then tried re-installing Wordpress, but that didn't fix anything. A Google search led me to this article - https://wordpress.org/support/topic/failed-to-load-jquery-at-load-scripts-php/ Which led to this extremely quick fix: Try adding define('CONCATENATE_SCRIPTS', false); to your wp-config.php file just below the define('DB_HOST' line. After adding that to my wp-config file, everything worked as expected.
Post a Comment
 Developers - Read More...