A Pen by Jordan.

Half-character-icon-font-styling.markdown

Half-character icon font styling

Adapted from HalfStyle (https://github.com/arbelh/HalfStyle) To style half of FontAwesome icon font (Flickr) Flat buttons, long shadow

A Pen by Jordan on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <!--Takes content of span to generate icon classes in output-->
<div id="div1">
<a href="#">
  <span class="textToHalfStyle social-btn" data-halfstyle="hs-base">fa fa-flickr</span>
</a>
</div>
<div id="div2">
  <a href="#">
    <span class="textToHalfStyle social-btn" data-halfstyle="hs-base">fa fa-flickr</span>
  </a>
</div>
<div id="div3">
<a href="#">
  <span class="textToHalfStyle social-btn" data-halfstyle="hs-base">fa fa-flickr</span>
  </a>
</div>

script.js

/*!
 * HalfStyle
 * Copyright 2014 Arbel Hakopian
 * Licensed under MIT (https://github.com/arbelh/HalfStyle/blob/master/license.md)
 */
jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle');
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        //for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="' + halfstyle_text + ' halfStyle ' + halfstyle_style + '"><i class="' + halfstyle_text + '"></i></span>';
        //}

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

style.scss

 $color-primary: #832718;
 $color-secondary: #fff;
 $color-background:#F9FAFE;
 $color-pink: #FFB0F2;
 $color-blue: #7BD7EE;
div{
  margin-bottom: 20px;
}

#div1 .social-btn{
    border-radius: 50%;
}
#div2 .social-btn{
    border-radius: 25%;
}
#div3 .social-btn{
    border-radius: 0%;
}

.social-btn{
    background-color: $color-primary;
    opacity: 0.5;
    text-align: center;
    text-decoration: none;
    color: $color-secondary;
    border-radius: 25%;
    display: inline-block;
    font-size: 2em;
    vertical-align:middle;
    width: 44px;
    height: 44px;
    line-height: 48px !important;
    overflow: hidden;
    margin: 0 3px;
    box-shadow: inset 0 -4px darken($color-primary, 10%);
    text-shadow: 
    1px 1px darken($color-primary, 10%),
    2px 2px darken($color-primary, 10%),
    3px 3px darken($color-primary, 10%),
    4px 4px darken($color-primary, 10%),
    5px 5px darken($color-primary, 10%),
    6px 6px darken($color-primary, 10%),
    7px 7px darken($color-primary, 10%),
    8px 8px darken($color-primary, 10%),
    9px 9px darken($color-primary, 10%),
    10px 10px darken($color-primary, 10%),
    11px 11px darken($color-primary, 10%),
    12px 12px darken($color-primary, 10%),
    13px 13px darken($color-primary, 10%),
    14px 14px darken($color-primary, 10%),
    15px 15px darken($color-primary, 10%),
    16px 16px darken($color-primary, 10%),
    17px 17px darken($color-primary, 10%),
    18px 18px darken($color-primary, 10%),
    19px 19px darken($color-primary, 10%),
    20px 20px darken($color-primary, 10%),
    21px 21px darken($color-primary, 10%),
    22px 22px darken($color-primary, 10%)
}
a:hover .social-btn{
  opacity: 1;
}
a:nth-child(1):hover .social-btn{
    background-color: $color-background;
    //opacity: 1;
    box-shadow: inset 0 4px darken($color-background, 5%);
    text-shadow: 
    1px 1px darken($color-background, 5%),
    2px 2px darken($color-background, 5%),
    3px 3px darken($color-background, 5%),
    4px 4px darken($color-background, 5%),
    5px 5px darken($color-background, 5%),
    6px 6px darken($color-background, 5%),
    7px 7px darken($color-background, 5%),
    8px 8px darken($color-background, 5%),
    9px 9px darken($color-background, 5%),
    10px 10px darken($color-background, 5%),
    11px 11px darken($color-background, 5%),
    12px 12px darken($color-background, 5%),
    13px 13px darken($color-background, 5%),
    14px 14px darken($color-background, 5%),
    15px 15px darken($color-background, 5%),
    16px 16px darken($color-background, 5%),
    17px 17px darken($color-background, 5%),
    18px 18px darken($color-background, 5%),
    19px 19px darken($color-background, 5%),
    20px 20px darken($color-background, 5%),
    21px 21px darken($color-background, 5%),
    22px 22px darken($color-background, 5%)
}
/* start half-style hs-base */
.halfStyle.hs-base {
    position:relative;
    display:inline-block;
    //font-size:80px; /* or any font size will work */
    //overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    //color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    //content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow:hidden;
}
a:nth-child(1):hover .halfStyle.hs-base {
    color: $color-pink; /* for demo purposes */
}
a:nth-child(1):hover .halfStyle.hs-base:before {
    color: $color-blue; /* for demo purposes */
}
 /* end half-style hs-base */