[Resolved] svg icons inserted into hook elements changes size when updating page

[Carsten]

I have a css issue with the svg icons inserted into two hook elements. When the page is refreshed, the icons disappear or changes in size

I have added width and height attributes to set the size in the elements, as suggested in another topic I opened about this issue in another element, which fixed the problem here.
It helped a bit here as well, now the icons do not disappear on refresh, but changes in size. I don’t know where the other icon size is defined which makes this change.

https://imgur.com/7H281YQ
https://imgur.com/ClfYruj

Please also have a look at the back arrow at the bottom of the page, where the arrow is turned into a square when page is refreshed.

https://imgur.com/wNUpPvD

I know it’s probably not directly a theme related issue, but I would appreciate your help on this one.

obs! The navigation is only displayed on mobile

Thanks!

[Leo]

Hi there,

Since this is not a theme-related issue, I’m not sure how much help we can provide here.

From your description, it sounds like an issue called FOUC – Flash of Unstyled Content and it’s usually a caching or optimizing plugin issue.

There are lots of articles on Google explaining this.

Hopefully this somewhat helps 🙂

[Carsten]

I can’t say whether its theme related or not, but your collage Elvin encouraged me to open a new topic for it.
Beside support was able to solve this similar issue:

https://generatepress.com/forums/topic/issue-with-svg-icon-code-inserted-into-element/#post-1943667

Thanks

[Leo]

Have you tried disabling all plugins except GP Premium to test?

Where can I see these icons you are referring to?

[Carsten]

Hi there, the login credentials should be added to the topic.

Below the code, with the icon size attributes, inserted in two generate_menu_bar_items hook elements.

Thanks!

 <div class="menu-bar-item">
	 
 <a href="/search"><svg viewBox="0 0 512 512" width="18" height="16" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  >
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"/>
</svg></a>

<a href="/members/me/bp-messages/"><svg aria-hidden="true" data-prefix="fas" data-icon="comments" class="svg-inline--fa fa-comments fa-w-18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="18" height="16" ><path fill="#1da1f2" d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"/></svg>

 
[bp_better_messages_unread_counter hide_when_no_messages="1" preserve_space="1"]

 
	</a>
 
	<a href="/members/me/profile/edit/group/1/"><svg aria-hidden="true" data-prefix="far" data-icon="user-circle" class="svg-inline--fa fa-user-circle fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="16" ><path fill="currentColor" d="M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z"/></svg>
 	</a> 
</div>

<div class="menu-bar-item">
	
    <a href="/members/me/profile/change-avatar/"><svg aria-hidden="true" data-prefix="fas" data-icon="camera-retro" class="svg-inline--fa fa-camera-retro fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="16" ><path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"/></svg>
	</a>
 
    <a href="/members/me/profile/change-cover-image/"><svg aria-hidden="true" data-prefix="far" data-icon="image" class="svg-inline--fa fa-image fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="16" ><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 01-6-6V118a6 6 0 016-6h404a6 6 0 016 6v276a6 6 0 01-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"/></svg>

	</a>
 

 
	<a href="/members/me/profile/"><svg aria-hidden="true" data-prefix="fas" data-icon="user-circle" class="svg-inline--fa fa-user-circle fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="16" ><path fill="#2aabd2" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"/></svg>
</a>
</div>

[Carsten]

Hi there, found this css related to the icons font-size: inherit;. Where is the origin of this, and where do I find the inherited size. I guess, if I apply the same size attributes to the elements, this issue will not appear?

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

Thanks!

[Leo]

The CSS you’ve mentioned above is not added by GP.

It’s targetting fa which is FontAwesome so I’m guessing it’s a plugin.

I can see the issues you’ve mentioned but the theme is not capable of causing this – you can see that the hamburger toggle didn’t change size when the page is reloaded.

I’m still guessing that this is the FOUC issue I’ve mentioned above which is usually caused by caching or optimizing plugins.

[Carsten]

Maybe it is not the theme causing this, but it is not a plugin either.

The issue is when using a hook element which is a pro feature.

At least your colleague was helpful and able to come op with a solution in the other topic I started about a similar issue with svg icons.

Regards

[Leo]

The hook element module cannot cause an issue like this – it simply allows you to add your own HTML to the GP hooks and does not alter it.

Can you try adding the icons to the page content using an HTML block? Does the issue exist there?

[Carsten]

I’m not familiar with this procedure, so have to look into documentation in order to do that.

[Leo]

Just start a test page, insert an HTML block with the icon:

<svg viewBox="0 0 512 512" width="18" height="16" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  >
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"/>
</svg>

[Carsten]

Hi there, I created a test page and added the html.

As far as I can see the icons do not change in size on page refresh as they do in the hook elements.

https://wedate.dk/icon-test-page/

Thanks

[Leo]

I only see one icon there and the square issue still exists when refreshing the page:
https://www.screencast.com/t/0a6soh2TBd9

Can you confirm?

This could also be a FA issue. I’d assume you are using the official FA plugin?

What if you add this icon in the same menu bar items hook?

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>

Does it change size?

[Carsten]

Hi there, the icons are restricted to display on mobile only, so please turn on mobile device view, and try again.

https://imgur.com/MzJqGfn

No, the alarm clock does not change size.
Neither do the icons on the test page.

I’m not using any FA plugin to my knowledge, if FA stands for Font Awesome

Thanks

[Leo]

I’m running out of ideas here unfortunately.

Are you using a FontAwesome plugin? What if you just disable it?

You can also switch the icons to use Bootstrap icons:
https://icons.getbootstrap.com/

That’s where I got the alarm icon from.

[Author]

Posts