FontAwesome Doesn’t have Buffer Icon? How to add?
On Crunchify we have been using Font Awesome since last 3 years for all of social sharing icons and Sidebar social follow buttons.
While working on social sharing icons we noticed we need Buffer social sharing button too and somehow FontAwesome doesn’t have buffer social button.
There is already an issue filed in 2013 without any resolution 🙁
https://github.com/FortAwesome/Font-Awesome/issues/2110#issuecomment-375451328
How did we add below buffer social icon on Crunchify?
One approach is a to use SVG (Scalable Vector Graphics) for buffer which you could add to your <a> tag.
Put below code to either your theme’s functions.php or sidebar HTML widget.
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 -6 35 35"> <path fill="#FFF" d="M5.985 10.736l9.378 4.142c.36.122.84.107 1.157 0l9.54-4.142c.568-.2.568-.916 0-1.157L16.52 5.6c-.318-.13-.88-.135-1.157 0L5.985 9.58c-.628.265-.628.818 0 1.156zm20.076 4.57l-2.1-.877-7.44 3.23c-.395.15-.77.14-1.154 0L8.05 14.43l-2.064.875c-.628.267-.628.865 0 1.157l9.378 4.142c.364.122.753.143 1.157 0l9.545-4.142c.566-.312.566-.818 0-1.157zm0 5.796l-2.1-.876-7.44 3.23a1.55 1.55 0 0 1-1.154 0l-7.313-3.23-2.064.876c-.63.266-.63.865 0 1.156l9.377 4.142c.364.122.753.143 1.157 0l9.54-4.142c.57-.31.57-.818 0-1.156z"> </path> </svg>
This is how you could add it to your functions.php file.
Here is a CSS for your buffer icon. Just add below CSS content to your theme’s style.css file.
.crunchify-buffer {
background: #444;
padding: 0 14px!important;
min-width: 50px;
}
.crunchify-buffer:active,
.crunchify-buffer:hover {
color: #fff;
}
And that’s it. While you don’t have an option to use FontAwesome for Buffer icon, you could add using SVG.
Let me know if you face any issue seeing Buffer Icon.
This is another svg code block for Buffer.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
<title>Logomark</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="single-article" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-76.000000, -17.000000)" fill="#8B959E">
<g id="navbar" sketch:type="MSLayerGroup">
<g id="Logomark-+-Buffer-Blogs" transform="translate(76.000000, 17.000000)" sketch:type="MSShapeGroup">
<g id="Logomark">
<path d="M16.1081948,12.3160169 L14.2622562,11.4680069 C14.1039803,11.3952806 13.8449201,11.3952806 13.6865809,11.4680069 L8.40129638,13.8960286 C8.24302055,13.9687549 7.98389696,13.9687549 7.82562113,13.8960286 L2.54033661,11.4680069 C2.3819974,11.3952806 2.12293719,11.3952806 1.96466136,11.4680069 L0.118722721,12.3160169 C-0.0395531114,12.3887431 -0.0395531114,12.5077211 0.118722721,12.5804474 L7.82562113,16.1209097 C7.98389696,16.193636 8.24302055,16.193636 8.40129638,16.1209097 L16.1081948,12.5804474 C16.2664706,12.5077211 16.2664706,12.3887431 16.1081948,12.3160169" id="Fill-1"></path>
<path d="M16.1081948,7.95547245 L14.2622562,7.10752563 C14.1039803,7.03479934 13.8449201,7.03479934 13.6865809,7.10752563 L8.40129638,9.53548424 C8.24302055,9.60821053 7.98389696,9.60821053 7.82562113,9.53548424 L2.54033661,7.10752563 C2.3819974,7.03479934 2.12293719,7.03479934 1.96466136,7.10752563 L0.118722721,7.95547245 C-0.0395531114,8.02819874 -0.0395531114,8.14723986 0.118722721,8.21996615 L7.82562113,11.7603653 C7.98389696,11.8330916 8.24302055,11.8330916 8.40129638,11.7603653 L16.1081948,8.21996615 C16.2664706,8.14723986 16.2664706,8.02819874 16.1081948,7.95547245" id="Fill-2"></path>
<path d="M0.118722721,3.85942174 L7.82562113,7.39988405 C7.98389696,7.47261033 8.24302055,7.47261033 8.40129638,7.39988405 L16.1081948,3.85942174 C16.2664706,3.78669545 16.2664706,3.66771752 16.1081948,3.59499123 L8.40129638,0.05452892 C8.24302055,-0.0181973684 7.98389696,-0.0181973684 7.82562113,0.05452892 L0.118722721,3.59499123 C-0.0395531114,3.66771752 -0.0395531114,3.78669545 0.118722721,3.85942174" id="Fill-3"></path>
</g>
</g>
</g>
</g>
</g>
</svg>