- This topic has 11 replies, 4 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
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/cjMSgwfWhat 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>Customer Support
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
Customer Support
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
CarstenWell it does have CSS for the icon:
https://www.screencast.com/t/79udvmpSgNot 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
CarstenI 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/ClfYrujPlease 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?
Customer Support
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. 🙂
- You must be logged in to reply to this topic.
