Archived topic
Issue with svg icon code inserted into element
11 replies · Started by Carsten on September 24, 2021
Hi there, I have added this code to a hook element to show new messages before navigation or inside navigation.
But when the page is updated the svg icon style looks like this:
https://imgur.com/LzaeeIt
https://imgur.com/cjMSgwf
What is causing these style issues when updating, is it the code below or something else?
Thanks!
<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"><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>Hi there,
in your HTML this line:
<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">
Add some width and height attributes to set the size eg.
<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="40" height="40">
Change the width="40" height="40" values to the size you want them displayed in pixels.
Hi there, thanks for the clarification, I inserted the width and height attributes to the code in the element, using the generate_inside_navigation hook.
I don't know, if it is a cache issue, I have tried to different browsers, but I'm still experiencing issues?
Regards
Can you try to change the height and width to the size you want it to display?
<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">
Let me know :)
Hi Ying, it helped a lot, now the size does not change. There is a slight change in the vertical alignment, like a change in padding or margin, but there are no css for the icon?
Regards
Carsten
Well it does have CSS for the icon:
https://www.screencast.com/t/79udvmpSg
Not sure if it's going to work, but have this CSS a try:
svg.svg-inline--fa.fa-comments.fa-w-18 {
vertical-align: 0 !important;
}Let me know :)
Hi Ying,
I see, I don't know where the vertical alignment comes from, it's not added by me, but your custom code is working great ;-)
Thanks for your help!
Regards
Carsten
I think it was from Font awesome, it's definitely not added by you :)
Glad the CSS works!
Hi there, I don't know if is possible to reopen a topic but I try.
I now have a css problem with svg icons inserted into two other hook elements.
I have added width and height attributes to set the size in the elements, as suggested but the size of the icon still resize when the page is refreshed.
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.
This is the shortcode added to the hook element
[alg_back_button fa="fas fa-arrow-left"]
Thank you
Since the topic has already marked as resolved, your site info has been erased.
Can you link us to your site again?
Hi Ying, you will need to have login credentials to see the issues, so should I create a new topic to add this login information?
Hi Carsten,
Is the issue on the exact same icons? If so, you can reopen the topic and re-add the private information.
If it's on another icon that's unrelated to the ones sorted here, you can open a new topic for it. :)
