Sign in

How to modify the svg of the footer icons?

  • This topic has 1 reply, 2 voices, and was last updated 5 months ago by .
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #8972
    Avatar photoseb_oi

    I am trying to replace the vimeo icon in the footer with a google icon (to link to the gmb tab). Here are the steps I have followed.
    1 I download an svg from fontawesone’s github.
    2 I copy the content of the “path d=”.
    M256,8C119.1,8,8,119.1,8,256S119.1,504,256,504,504,392.9,504,256,392.9,8,256,8ZM185.3,380a124,124,0,0,1,0-248c31.3,0,60.1,11,83,32.3l-33.6,32.6c-13.2-12.9-31.3-19.1-49.4-19.1-42.9,0-77.2,35.5-77. 2,78.1S142.3,334,185.3,334c32.6,0,64.9-19.1,70.1-53.3H185.3V238.1H302.2a109.2,109.2,0,0,1,1.9,20.7c0,70.8-47.5,121.2-118.8,121.2ZM415.5,273.8v35.5H380V273.8H344.5V238.3H380V202.8h35.5v35.5h35.2v35.5Z
    3 I replace the content of the Vimeo “path d=” in the svg-map.svg file.

    <symbol id=”vimeo” viewBox=”0 0 0 24.999 20.159″>
    <path d=”M256,8C119.1,8,8,119.1,8,256S119.1,504,256,504,504,392.9,504,256,392.9,8,256,8ZM185.3,380a124,124,0,0,1,0-248c31. 3,0,60.1,11,83,32.3l-33.6,32.6c-13.2-12.9-31.3-19.1-49.4-19.1-42.9,0-77.2,35.5-77.2,78.1S142.3,334,185. 3,334c32.6,0,64.9-19.1,70.1-53.3H185.3V238.1H302.2a109.2,109.2,0,0,1,1.9,20.7c0,70.8-47.5,121.2-118.8,121. 2ZM415.5,273.8v35.5H380V273.8H344.5V238.3H380V202.8h35.5v35.5h35.2v35.5Z” transform=”translate(-4.747 -5.927)” />

    4 I replace the content of the Vimeo “path d=” in the svg-map.js file.

    “#vimeo”: {
    “viewbox”: “0 0 24,999 20,159”,
    “content”: “<path d=\”M256,8C119.1,8,8,119.1,8,256S119.1,504,256,504,504,392.9,504,256,392.9,8,256,8ZM185. 3,380a124,124,0,0,1,0-248c31.3,0,60.1,11,83,32.3l-33.6,32.6c-13.2-12.9-31.3-19.1-49.4-19.1-42.9,0-77.2,35.5-77.2,78.1S142. 3,334,185.3,334c32.6,0,64.9-19.1,70.1-53.3H185.3V238.1H302.2a109.2,109.2,0,0,1,1.9,20.7c0,70.8-47.5,121.2-118.8,121. 2ZM415.5,273.8v35.5H380V273.8H344.5V238.3H380V202.8h35.5v35.5h35.2v35.5Z\” transform=\”translate(-4.747 -5.927)\” />”

    5 I save the files and reinstall the theme from publii but I can’t get the icon to display. What am I doing wrong?

    Avatar photoTomasz Dziuda


    Do you get old icon or no icon at all?

    Sometimes it is a cache issue with the browser – you can try in the incognito mode then.

    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.