Custom fontello icon issues - Support | Kriesi.at

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
November 19, 2025 at 8:48 pm #1491531
Kelly Erickson
Participant
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!
November 20, 2025 at 6:39 am #1491549
Ismael
Moderator
Hey Kelly,

Thank you for the inquiry.

Try to add this css to adjust the default top margin of the SVG icons in the header:
```
#top .social_bookmarks li.avia-svg-icon img[is-svg-img=true], #top .social_bookmarks li.avia-svg-icon svg:first-child {
    height: 1em;
    width: auto;
    margin-top: 3px;
}
```
Then include the following to realign the SVG icons with the font icons inside the content container:
```
#top #main .avia-svg-icon.avia-font-svg_entypo-fontello svg:first-child {
    stroke: unset!important;
    top: 8px;
    position: relative;
}
```
Result:

We recommend uploading a similar custom SVG icon for the instagram icon to fix the alignment issue.

Let us know the result.

Best regards,
Ismael
November 21, 2025 at 12:52 am #1491606

Kelly Erickson
Participant

Thank you! I didn’t end up adding the Header CSS because adding the custom Fontello Instagram icon fixed that issue.

Any thoughts on why adding those to the header area also added a small rectangle next to the Home page menu item in the navigation? (See the 3rd screenshot provided in the prior Private Content).

Thanks!

November 21, 2025 at 9:38 am #1491624
Ismael
Moderator
Hi,

Thank you for the update.

The rectangle beside the Home menu item is caused by this css code. Where did you get the icon code “f2d8”?
```
#avia-menu > li:nth-child(1) > a .avia-menu-text:before {
    content: "\f2d8";
    font-family: 'entypo-fontello';
}
```
Unfortunately, you cannot display an icon using css and its icon code. You will need to use the icon shortcode in the Appearance > Menus panel.

Best regards,
Ismael
November 21, 2025 at 7:11 pm #1491658

Kelly Erickson
Participant

Gosh – that’s a great question in terms of where I got that code! Thanks for the catch, we can close this thread since you’ve graciously solved my issues.

Thank you so much!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Custom fontello icon issues’ is closed to new replies.