Custom fontello icon issues

Hi there! It’s been a while but I’m back with some more issues regarding the centering of shortcode icons in an Avia text box, along with another issue with adding a custom fontello icon.

I will note: with all of these issues, I’ve cleared cache on the website, on my browser, used incognito windows and other browsers to cross check and troubleshoot.

Overview: I’ve uploaded an IMDB Fontello Icon as outlined in the Enfold documentation. I want to be able to use this icon in both the header & socket as well as within the Shortcode Icons options to use on pages within the site using the text block editor.

I have inserted the following CSS in the Quick CSS theme options section:

#top .av_textblock_section .av_font_icon {
    display: inline-block;
    float: none;
}

Issue #1 with a custom fontello icon:
When using in a standard text box and inserting the icons using shortcode, the icons do center align but they are staggered (the custom icon is lower than the Instagram icon that is already in there). See the link in the Private Content and scroll down to the bottom to see the result of that.

Issue #2:
Header & footer icons are also misaligned, see screenshot link below.
As a result of changing the size of the icons in the header and footer as well, the mouseovers are off (on the Instagram specifically, the circle mouseover is not centering around the icon). Best way to see this is in the live link I’ve provided as well as the screenshots in the Private Content!

Thank so much in advance!