Missing Buffer Social Icon in Font Awesome? How to add it manually into your WordPress site?

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.