SVG icons missing - Support | Kriesi.at - Premium WordPress Themes

Tagged: filter, font, fontello, icon, icons, svg

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

Author

Posts
April 9, 2025 at 4:36 pm #1481086

spooniverse
Participant

Dear support team,

I’ve been trying to get to grips with SVG icons since the 7.x update, but somehow I’m mainly having problems. On all my pages where I have done the update, all icons are missing. I’m not even talking about changed icons, just the normal ones like the arrow to scroll up. I tried it with color settings or CSS, but I can’t find any icons in the frontend in the source code. For example in a slider:

<a href="#prev" class="prev-slide avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="left-open-big" data-av_iconset="svg_entypo-fontello" tabindex="-1"><span class="avia_hidden_link_text">Back</span></a>

There is a class, but no icon as such. Why is that? What is the problem? Is there a filter with which I can deactivate the new option? Or what do I have to do so that the icons are displayed again? Unfortunately, it doesn’t work at all for me like this …

Thanks for your help and support.

Kind regards,
Daniel

April 10, 2025 at 6:22 am #1481119

Ismael
Moderator

Hey Daniel,

Thank you for the inquiry.

It might be an issue with the compression or the cache plugin. Please try to toggle or temporarily disable the Enfold > Performance > File Compression settings, then deactivate the cache plugin. Let us know the result. If the issue persists, please provide the site URL and login details in the private field.

Best regards,
Ismael

April 10, 2025 at 9:46 am #1481125

spooniverse
Participant

Hi Ismael,

I am sorry but no change at all. Tried all of the options in the performance settings. Emptied browser cache, opened in a private window. The Icons are even missing on two fresh installations …

Any ideas on what to do?

All the best,
Daniel

April 11, 2025 at 5:02 am #1481171

Ismael
Moderator

Hi,

We may need access to the dashboard to properly check the issue. Please create a site backup, confirm that a restore point has been created, and then provide the login details in the private field.

Best regards,
Ismael

April 22, 2025 at 12:09 pm #1481822

spooniverse
Participant

Hi Ismael,

sorry for delay. Did quite some testing. I have the problem with the missing icons on all Enfold installations I am managing and where I did the update. I rolled it back and afterwards tried it with some fresh installations in different browsers, cleared cache and so on. I can’t deactivate the svg option and can’t see icons …

That is the case for preselected icons (like the scroll up arrow for example) and in the pagebuilder. If I select an icon element the first section “SVG Iconset: Entypo Fontello (Default)” is empty and shows nothing.

You find some credentials in private to a new project with the error in full display. Hope you can help me!

Best regards,
Daniel

April 23, 2025 at 7:19 am #1481919
Ismael
Moderator
Hi,

Thank you for the info.

The SVG files are not displaying correctly because of this hook in the functions.php file:
```
// SVG-Logo als IMG

function no_inline_svg() {
  return true;
}
add_action('avf_no_inline_svg', 'no_inline_svg');
```
We disabled it temporarily and created a test page. (see private field)

View post on imgur.com

Best regards,
Ismael
April 23, 2025 at 9:51 am #1481937

spooniverse
Participant

Hi Ismael,

that’s quite obvious in the end. I could have come across that myself. Sorry! This code was shared here in the forum when you started to embed the logo as SVG directly.

I want the logo as SVG not to be used in paths. The file should be loaded. Therefore I have the code in all my pages.

Can I adapt it somehow? So that it only affects the logo, not the entire homepage? Because otherwise I have the problem with the icons and they can be used as a path because of me.

Is there a filter for the code so that (only) the logo is integrated as a file (SVG) and not as a path?

I look forward to your support. Thanks a lot!

Best regards,
Daniel

April 23, 2025 at 3:32 pm #1481958

spooniverse
Participant

Here I got the code from Rikard: Post #1327639

Is there a hook to tie it only to the logo?

April 24, 2025 at 9:33 am #1482101
Ismael
Moderator
Hi,

This is the complete filter.
```
$no_inline = apply_filters( 'avf_no_inline_svg', false, attachment_id, $url );
```
You can check the value of $url or $attachment_id. If it matches the logo, return true; otherwise, return false.

Example:
```
function no_inline_svg($inline, $attachment_id, $url) {
    $logo_id = 123; // logo id here
    $logo_url = wp_get_attachment_url($logo_id);

    if (($attachment_id && $attachment_id == $logo_id) || ($url && $url == $logo_url)) {
        return true;
    }

    return $inline;
}
add_filter('avf_no_inline_svg', 'no_inline_svg', 10, 3);
```
Best regards,
Ismael
April 24, 2025 at 11:08 am #1482133

spooniverse
Participant

Hi Ismael,

that is the right direction. How can I write the if part if the logo is not in the library? Because I don’t have a ID for the logo …

Any idea?

All the best,
Daniel

April 25, 2025 at 6:22 am #1482562

Ismael
Moderator

Hi,

Have you tried checking for the URL? Just replace the $logo_url with the actual URL of the logo image.

Best regards,
Ismael

April 28, 2025 at 12:08 pm #1483295

spooniverse
Participant

Sorry, I tried different itterations but none of them loads the logo as file. I don’t want the logo to be loaded as path. How can I achieve that?

April 30, 2025 at 7:11 am #1483376
Ismael
Moderator
Hi,

We edited the functions.php file and adjusted the hook as described above:
```
function avf_no_inline_svg_mod($attachment_id, $url) {
    $logo_url = 'xxxxxxxxxxxxxx';

    if (($attachment_id && $attachment_id == $logo_id) || ($url && $url == $logo_url)) {
        return true;
    }

    return false;
}
add_filter('avf_no_inline_svg', 'avf_no_inline_svg_mod', 10, 2);
```
|| removed screenshot ||

Best regards,
Ismael
April 30, 2025 at 9:28 am #1483390

spooniverse
Participant

Nice! Pretty shure I tried this and it didn’t work but never mind. Glad about the code. Thanks! You can delete the linked image.

A last question about the hook: Can I somehow load the logo url from the theme settings? In the Enfold theme options I link to the logo file and if I could refer to the given path there I would not have to change it in the code in the functions.php. Like:

$logo_url = URL FROM THEME OPTIONS;

Any chance to do so?

All the best,
Daniel

May 1, 2025 at 7:17 am #1483430
Ismael
Moderator
Hi,

: Can I somehow load the logo url from the theme settings

Yes, that should be possible. We adjusted the $logo_url a bit.
```
$logo_url = avia_get_option( 'logo' );
```
Best regards,
Ismael
May 2, 2025 at 3:10 pm #1483513
spooniverse
Participant
Nice! That is the final code I am using to load only the logo as SVG-file and use SVG paths for the rest:
```
function avf_no_inline_svg_mod($attachment_id, $url) {
    $logo_url = avia_get_option( 'logo' );

    if ($url && $url == $logo_url) {
        return true;
    }

    return false;
}
add_filter('avf_no_inline_svg', 'avf_no_inline_svg_mod', 10, 2);
```
May 2, 2025 at 3:12 pm #1483514

spooniverse
Participant

But could I somehow disable the SVG icons? I have some pages with a lot of icons and different colors for them set in CSS as color:. Now I would have to change that to stroke: or am I wrong?

Best regards,
Daniel

May 5, 2025 at 5:10 am #1483584

Ismael
Moderator

Hi,

There is no option to disable the SVG icons, but you can replace them, and use Iconfonts if necessary.

View post on imgur.com

Best regards,
Ismael

May 5, 2025 at 11:19 am #1483617
Guenni007
Participant
sorry i did not read the whole text here on that topic; but if i see something with inline-svg : did you have any css rule managing the width or height of svg’s ?

__________________
so this might be offtopic – but that was one reason why some of my svg icons seems not to be in place

On former installations of mine – i use a snippet to convert all img tags that are svgs to inline svgs. those svg’s that do not have a width and height definition inside the svg code ( only viewport settings ) need an absolute width to be shown. Otherwise these svgs are listed as 0x0 dimension.
For those svgs i have set in my quick css a rule like:
#top #main svg {width: 1500px}
with those new svg icons we have on iconbox.css this rule:
```
.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em;
  width:1em;
  margin-top:3px
}
```
so my setting for inline svgs is more selective – and wins the game!
to avoid that :
```
.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em !important;
  width:1em !important;
  margin-top:3px
}
```
Author

Posts

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

You must be logged in to reply to this topic.