I have created a reusable SPFx webpart which will allow you to add configurable header and footer via Webpart UI, you can find this solution here. All you need to do.
I have tried and tested below html to footer
<div>
<div class="ms-bgColor-themeDark ms-fontColor-white" style="height:40px;float: left;line-height:2.5;font-weight:bold;align-items: right;width: 100%;">
<div style="float: right;padding-right: 135px;">
<a href="https://twitter.com/batman" style="padding: 5px;">
<img src="/sites/mysc/SiteAssets/twitter-16.png" alt="Smiley face"></a>
<a href="https://facebook.com/batman" style="padding: 5px;">
<img src="/sites/mysc/SiteAssets/facebook-3-16.png" alt="Smiley face"></a>
<a href="https://instagram.com/batman" style="padding: 5px;">
<img src="/sites/mysc/SiteAssets/instagram-16.png" alt="Smiley face"></a>
</div>
</div>
</div>
Please note that you have to upload you icons in SiteAssets library or refer from appropriate path. Change the background color using in line style to 2nd level of div.
If you have your own SPFx extension like you tried above using blog, you have to add below code in onInit() method
public onInit(): Promise<void> {
let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
if (bottomPlaceholder) {
bottomPlaceholder.domElement.innerHTML = '<div>
<div class="ms-bgColor-themeDark ms-fontColor-white" style="height:40px;float: left;line-height:2.5;font-weight:bold;align-items: right;width: 100%;">
<div style="float: right;padding-right: 135px;">
<a href="https://twitter.com/batman" style="padding: 5px;">
<img src="/sites/mysc/SiteAssets/twitter-16.png" alt="Smiley face"></a>
<a href="https://facebook.com/batman" style="padding: 5px;">
<img src="/sites/mysc/SiteAssets/facebook-3-16.png" alt="Smiley face"></a>
<a href="https://instagram.com/batman" style="padding: 5px;">
<img src="/sites/mysc/SiteAssets/instagram-16.png" alt="Smiley face"></a>
</div>
</div>
</div>';
return Promise.resolve();
}
Note - change the path of images and hyperlink as per your requirement.
Screenshot on how it looks using above html

Icons Reference links
https://www.iconsdb.com/icons/download/white/twitter-16.png
https://www.iconsdb.com/icons/download/white/facebook-3-16.png
https://www.iconsdb.com/icons/download/white/instagram-16.png
If you want to use my resuable solution, below is what you can do
- Download code
- Modify solution to refer solution assets from cdn, azure etc(as per you requirement)
- Package the solution
- Upload to App catalog
- Install app to required site collection
- Create a modern page and add webpart
- Add required html to footer text area
- Click on register custom action, refresh the page and you are good to go
- To modify html, visit page again. you can update html in text area and click update custom action. Refresh the page.
Useful links -
Basic understanding of SPFx Webpart
Deploy SPFx assets to Office 365 CDN
Hope this helps...Happy coding..!!!
Please upvote and mark as answer if this helped.