CMS Development

sjay
Member | Diamond Partner
Member | Diamond Partner

Missing Icons in HubSpot

SOLVE

Hi Team,

Most of our SVG icons have suddenly disappeared/been Missed on our web pages.

Heard that HubSpot recently moved all files (images, pdf, etc.) to a new CDN server. In that process, unfortunately, we lost most of the Images.


After a request, we got some images, and some were not.

Also I've read an article that use xlink is deprecated. and I used an alternative code for the Icons. Even though it was not worked. 

Can anyone please help me out, how to get my icons back?

For an example:

1) Icon-right-arrow
 Data and Analytics | Transforming complex data into business insights (columbusglobal.com)

sjay_1-1669819667436.png

 


2)  Icon close 

sjay_0-1669819581123.png


3) Icon-left-arrow


Thanks,
Sanjay


0 Upvotes
1 Accepted solution
Jake_Lett
Solution
Guide | Partner
Guide | Partner

Missing Icons in HubSpot

SOLVE

@sjay You're welcome. Here are some ways you could try and figure out how/when/by whom edited the theme.

 

Go to Marketing > Design Tools > close all open tabs and you should see this screen. Click "view all recently edited". 

Screen Shot 2022-12-03 at 4.20.10 AM.png

 

Since this code I believe would need to be present on every page, look for a header.html file and right click on it to reveal the "show revision history". See if any changes have been made to that file or the base.html file.

Screen Shot 2022-12-03 at 4.10.35 AM.png

 

If that doesn't work, email everyone who has the user permission to edit code files and ask them. Ricky! You got some splannin to do. : )

View solution in original post

0 Upvotes
4 Replies 4
Jake_Lett
Solution
Guide | Partner
Guide | Partner

Missing Icons in HubSpot

SOLVE

@sjay You're welcome. Here are some ways you could try and figure out how/when/by whom edited the theme.

 

Go to Marketing > Design Tools > close all open tabs and you should see this screen. Click "view all recently edited". 

Screen Shot 2022-12-03 at 4.20.10 AM.png

 

Since this code I believe would need to be present on every page, look for a header.html file and right click on it to reveal the "show revision history". See if any changes have been made to that file or the base.html file.

Screen Shot 2022-12-03 at 4.10.35 AM.png

 

If that doesn't work, email everyone who has the user permission to edit code files and ask them. Ricky! You got some splannin to do. : )

0 Upvotes
Jake_Lett
Guide | Partner
Guide | Partner

Missing Icons in HubSpot

SOLVE

Hi @sjay I used wayback machine to see if I could find any difference and see something missing in your current site. view-source:https://web.archive.org/web/20211017200114/https://www.columbusglobal.com/en/solutions/data-analytic...

 

The icons reference this master SVG file like a sprite. So it needs to be added to the page in order for your icons to appear. I have never seen this done before and is a pretty complex way to load in an SVG icon. 

 

This isn't an issue with HubSpot but a theme issue. Have there been any updates to your theme code recently?

 

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-right-arrow" viewbox="0 0 45 32">
            <title>right-arrow</title>
            <path fill="currentColor" d="M26.445 0l-3.315 3.126 10.125 10.413h-33.254v4.547h33.165l-10.035 10.342 3.315 3.126 15.366-15.776z"></path>
        </symbol>
        <symbol id="icon-share" viewbox="0 0 29 32">
            <title>share</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M20.364 7.273l-5.818-5.818-5.818 6.044"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M22.221 13.091h5.415v17.455h-26.182v-17.455h5.215"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M14.545 1.455v19.021"></path>
        </symbol>
        <symbol id="icon-search" viewbox="0 0 32 32">
            <title>search</title>
            <path class="path1" fill="none" stroke="#878787" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M24.32 12.887c0 6.314-5.12 11.433-11.433 11.433-6.314 0-11.433-5.119-11.433-11.433s5.119-11.433 11.433-11.433c6.313 0 11.433 5.119 11.433 11.433v0z"></path>
            <path class="path2" fill="none" stroke="#878787" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M20.968 20.968l9.577 9.577"></path>
        </symbol>
        <symbol id="icon-phone" viewbox="0 0 32 32">
            <title>phone</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="2.6667" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M35.412 20.903c0.272-4.954-1.378-9.717-4.647-13.412-3.266-3.696-7.762-5.883-12.658-6.158"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="2.6667" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M28.715 19.226c0.157-2.831-0.801-5.552-2.698-7.664s-4.508-3.361-7.35-3.519"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="2.6667" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M24.288 36c-1.497-0.362-10.244-0.775-16.969-8.714-6.724-7.938-5.862-16.811-5.985-18.375 0.544-0.683 2.404-2.942 4.841-5.043 0.347-0.3 0.693-0.586 1.037-0.857 1.921 3.048 3.15 6.209 3.579 7.394l-3.13 2.415c-0.209 0.162-0.335 0.41-0.341 0.676-0.013 0.516-0.004 5.186 4.163 10.106 4.243 5.006 9.040 5.692 9.243 5.719 0.263 0.036 0.523-0.053 0.714-0.236l2.852-2.749c1.253 0.702 4.060 2.385 6.678 4.718-0.313 0.296-0.647 0.596-0.996 0.898-2.425 2.093-4.874 3.577-5.684 4.048z"></path>
        </symbol>
        <symbol id="icon-phone-filled" viewbox="0 0 32 32">
            <title>phone-filled</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.0476" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M30.451 18.286c0.239-4.243-1.211-8.323-4.085-11.487-2.872-3.166-6.824-5.039-11.128-5.275"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="3.0476" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M24.366 16.762c0.143-2.315-0.727-4.539-2.451-6.266s-4.095-2.748-6.677-2.877"></path>
            <path class="path3" fill="currentColor" stroke="none" d="M20.066 32c-1.308-0.318-7.96-1.537-13.839-8.504-5.878-6.967-6.119-13.897-6.227-15.27 0.475-0.599 2.102-2.582 4.231-4.426 0.304-0.264 0.605-0.514 0.907-0.752 1.679 2.675 2.753 5.45 3.128 6.489l-2.736 2.119c-0.183 0.142-0.293 0.36-0.298 0.594-0.011 0.453-0.003 4.551 3.639 8.869 3.709 4.394 7.903 4.995 8.080 5.019 0.23 0.032 0.457-0.046 0.624-0.207l2.493-2.413c1.096 0.616 3.549 2.093 5.838 4.141-0.274 0.26-0.565 0.523-0.87 0.789-2.119 1.836-4.261 3.139-4.969 3.552z"></path>
        </symbol>
        <symbol id="icon-menu" viewbox="0 0 50 32">
            <title>menu</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.778 1.778h46.222"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.778 16h46.222"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M1.778 30.222h46.222"></path>
        </symbol>
        <symbol id="icon-filter" viewbox="0 0 56 32">
            <title>filter</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M2 2h52"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M12 16h34"></path>
            <path class="path3" fill="none" stroke="currentColor" stroke-width="4" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M24 30h8"></path>
        </symbol>
        <symbol id="icon-envelope" viewbox="0 0 50 32">
            <title>envelope</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="round" d="M48 30.222h-46.222v-28.444h46.222z"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="3.5556" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M1.778 5.333l23.111 16 23.111-16"></path>
        </symbol>
        <symbol id="icon-envelope-filled" viewbox="0 0 50 32">
            <title>envelope-filled</title>
            <path class="path1" fill="currentColor" d="M0 6.545v23.167c0 1.269 1.027 2.288 2.295 2.288h44.351c1.273 0 2.295-1.030 2.295-2.301v-23.154l-23.17 16.040c-0.783 0.542-1.819 0.542-2.602 0l-23.169-16.040zM0.144 1.483c0.324-0.866 1.162-1.483 2.151-1.483h44.351c0.98 0 1.817 0.616 2.146 1.484-0.4 0.026-0.799 0.157-1.152 0.402 0 0-22.722 16.35-23.149 16.055-7.73-5.352-23.19-16.055-23.19-16.055-0.355-0.246-0.756-0.377-1.157-0.402z"></path>
        </symbol>
        <symbol id="icon-close" viewbox="0 0 31 32">
            <title>close</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M2.128 2.629l26.741 26.741"></path>
            <path class="path2" fill="none" stroke="currentColor" stroke-width="2.9091" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M2.128 29.371l26.741-26.741"></path>
        </symbol>
        <symbol id="icon-checkmark" viewbox="0 0 29 32">
            <title>checkmark</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.2" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M26.649 1.6l-12.776 28.8-12.273-13.665"></path>
        </symbol>
        <symbol id="icon-caret-down" viewbox="0 0 64 32">
            <title>caret-down</title>
            <path class="path1" fill="currentColor" d="M51.866-0.003l-20.282 20.269-20.269-20.269h-11.315l31.59 31.59 31.59-31.59z"></path>
        </symbol>
        <symbol id="icon-arrow-up" viewbox="0 0 53 32">
            <title>arrow-up</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="5.3333" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M2.667 27.494l24.022-24.152 23.978 23.841"></path>
        </symbol>
        <symbol id="icon-arrow-right" viewbox="0 0 19 32">
            <title>arrow-right</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.2" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M1.6 1.6l14.491 14.413-14.305 14.387"></path>
        </symbol>
        <symbol id="icon-arrow-left" viewbox="0 0 19 32">
            <title>arrow-left</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="3.2" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M16.497 30.4l-14.491-14.413 14.305-14.387"></path>
        </symbol>
        <symbol id="icon-arrow-down" viewbox="0 0 53 32">
            <title>arrow-down</title>
            <path class="path1" fill="none" stroke="currentColor" stroke-width="5.3333" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="round" d="M50.667 2.667l-24.022 24.152-23.978-23.841"></path>
        </symbol>
    </defs>
</svg>

 

 

sjay
Member | Diamond Partner
Member | Diamond Partner

Missing Icons in HubSpot

SOLVE

Thank you so much  @Jake_Lett for helping me out. 

Do you have any idea, where can I see the Theme Information, and who updated the theme at any place in our system?


0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Missing Icons in HubSpot

SOLVE

Hi, @sjay 👋 To clarify, have you already reached out to support directly? I would rather not guess, and I also don't want to loop you back if you've already taken that step.

 

Hey, @BarryGrennan @Jake_Lett @jpsanchez, based on the details we have, do you have any suggestions for @sjay?

 

Thank you! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes