Support » Plugin: GenerateBlocks » Please add social icon: Facebook Messenger

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter yellofish

    (@yellofish)

    Well, I was probably the only one that didn’t know that…. This worked for me:

    I found this link to a SVG file that I liked: https://upload.wikimedia.org/wikipedia/commons/6/6c/Facebook_Messenger_logo_2018.svg

    Downloaded the SVG, opened it in Notebook++ – it looks like this:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 994 994">
     <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="497" y1="1003" x2="497" y2="9.0126" gradientTransform="matrix(1 0 0 -1 0 1003)">
      <stop offset="0" style="stop-color:#00B2FF"/>
      <stop offset="1" style="stop-color:#006AFF"/>
     </linearGradient>
     <path fill="url(#Gradient)" d="M497,0C217,0,0,205.1,0,482.1C0,627,59.4,752.2,156.1,838.7c8.1,7.3,13,17.4,13.4,28.3
    	l2.7,88.4c0.9,28.2,30,46.5,55.8,35.2l98.6-43.5c8.4-3.7,17.7-4.4,26.5-2c45.3,12.5,93.6,19.1,143.9,19.1
    	c280,0,497-205.1,497-482.1S777,0,497,0z"/>
     <path fill="#FFFFFF" d="M198.6,623.1l146-231.6c23.2-36.8,73-46,107.8-19.9l116.1,87.1c10.7,8,25.3,7.9,35.9-0.1
    	l156.8-119c20.9-15.9,48.3,9.2,34.2,31.4L649.5,602.5c-23.2,36.8-73,46-107.8,19.9l-116.1-87.1c-10.7-8-25.3-7.9-35.9,0.1
    	L232.8,654.5C211.9,670.4,184.5,645.3,198.6,623.1z"/>
    </svg>

    Under “Icon” simply paste it into the “Icon SVG HTML” field. That’s it.

    Comes out in perfect size and color!

    • This reply was modified 5 months, 2 weeks ago by yellofish.
    • This reply was modified 5 months, 2 weeks ago by yellofish.
    Thread Starter yellofish

    (@yellofish)

    It’s seems this method makes trouble in Android Chrome Mobile.

    Anybody has a proven working facebook messenger SVG?

    Plugin Support David

    (@diggeddy)

    Hi there,

    glad you found out how to add the icons.
    For reference this doc explains how:

    https://docs.generateblocks.com/article/adding-custom-svg-icons/

    You may want to opt for downloading a non-gradient SVG.
    Quite a few of the font icon libraries like Font Awesome have them

    Thread Starter yellofish

    (@yellofish)

    Thanks, great link!

    So I got the icon from Font Awesome, however it has only one color and the “flash” is transparent, which is trouble if the background is not white. So I put a white rectangle behind the flash, then optimized it in SVGomg to strip all ballast – and this came out:

    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="#fff" d="M95.105 155.685h327.003v198.677H95.105z"/><path d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23.367 10.663 9.239 19.235 19.908 19.235 2.744 0 5.458-.567 7.972-1.665 52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.405 37.405 0 01-31.557 17.353 37.377 37.377 0 01-22.353-7.423l-58.08-43.47c-5.318-3.988-12.682-3.988-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.395 37.395 0 0131.554-17.357 37.365 37.365 0 0122.356 7.427l58.06 43.46c5.318 3.988 12.682 3.988 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z" fill-rule="nonzero"/></svg>

    Works fine.

    Plugin Support David

    (@diggeddy)

    Glad to hear you found a solution!

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