Two new social networks are emerging: Gab and Parler. And there is this awesome and popular set of vector icons and social logos in the form of an SVG font: Font Awesome. This set of icons already includes traditional and bigger social networks logos, such as Facebook, Instagram and Twitter. Although users are requesting the addition of the Gab and Parler logos, no one knows whether (nor when) these requests will be implemented. As many people want to use these logos — me myself included — I made a workaround and I’m sharing it in case it can be useful for someone else.
The icons I injected into Font Awesome are the following:
If you want to use these icons in your website, here is the recipe:
1. Set up Font Awesome, either download it and host it yourself, retrieve it from a CDN or use Font Awesome’s own CDN. Make sure you add the Font Awesome JavaScript to your page.
For instance, this page is retrieving Font Awesome from the jsDelivr CDN:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css" integrity="sha256-0fuNgzfNIlaClbDtmYyFxY8LTNCDrwsNshywr4AALy0=" crossorigin="anonymous">
<!-- ... -->
</head>
<body>
<!-- ... -->
<!-- Font Awesome JS -->
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/js/all.js" integrity="sha256-pvPP8sWBrowznHv1xsjTBO7/74OBKzmOCGaEeq3q+TQ=" crossorigin="anonymous"></script>
</body>
</html>
2. Download font-awesome-gab-parler.js and reference it in your page:
1
2
3
4
5
6
<body>
<!-- ... -->
<!-- Gab and Parler icons for Font Awesome -->
<script src="font-awesome-gab-parler.js"></script>
</body>
</html>
3. Call the setUpGabAndParlerIconsForFontAwesome() JavaScript function when the document is ready.
For instance, if you use jQuery:
1
2
3
$(document).ready(function(){
setUpGabAndParlerIconsForFontAwesome();
});
4. Now you are ready to use the icons. Copy their HTML code from above.
For instance:
1
<p>Which one do you prefer? <i class="gab fa-gab"></i> Gab? Or <i class="parler fa-parler"></i> Parler?</p>
For a working example, see this. View the page source to get the full picture.
I’m open to suggestions and improvements. See this project on GitHub.
Did you like it? What about sharing?
