-
Hi, im using svg icons with gp blocks thats okey but have some plugins and that plugins use fontawesome icons and they are not working, anyway i want use svg icons allready. how i can change fontawesome icons with svg?
Example code:
<a class='likelink' href='$link' title='$title'><i class='fa fa-cloud-download'></i> $title</a>"; -
Hi there,
The easiest solution would be to copy the SVG code from the FA icon page:
https://fontawesome.com/icons/facebook?f=brands&s=solidAnd paste it into the ICON SVG HTML field:
https://docs.generateblocks.com/article/icon-overview/#adding-an-iconLet me know if this helps 🙂
-
https://docs.generateblocks.com/article/icon-overview/#adding-an-icon im using this allready.
i have a plugin and i have this code:
<a class='likelink' href='$link' title='$title'><i class='fa fa-cloud-download'></i> $title</a>";in this code, <i class=’fa fa-cloud-download’></i> i want replace this with for example:
<svg width="64px" height="64px" viewBox="0 0 24 24" id="Line" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><line id="primary" x1="4" y1="21" x2="20" y2="17" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></line><path id="primary-2" data-name="primary" d="M4,17l16,4m-8-6a4.58,4.58,0,0,0,4.67-4.67C16.67,7,13.33,7,13.32,3A6.92,6.92,0,0,0,10,8.33a3.29,3.29,0,0,1-1.33-2,7.18,7.18,0,0,0-1.34,4C7.33,12.43,8,15,12,15Z" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></path></g></svg>i try this:
<a class='likelink' href='$link' title='$title'><svg width="64px" height="64px" viewBox="0 0 24 24" id="Line" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><line id="primary" x1="4" y1="21" x2="20" y2="17" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></line><path id="primary-2" data-name="primary" d="M4,17l16,4m-8-6a4.58,4.58,0,0,0,4.67-4.67C16.67,7,13.33,7,13.32,3A6.92,6.92,0,0,0,10,8.33a3.29,3.29,0,0,1-1.33-2,7.18,7.18,0,0,0-1.34,4C7.33,12.43,8,15,12,15Z" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></path></g></svg> $title</a>";But not working.
-
If this is a plugin-related question then please check with the plugin’s support team.
Let me know if I’m missing something here.
-
Dear Leo,
Can svg icon be used in such code? If it is available, how should it be arranged?
<a class='likelink' href='$link' title='$title'><i class='fa fa-cloud-download'></i> $title</a>"; -
Hi there,
You can try replacing the
<i class='fa fa-cloud-download'>with the svg code.But it’s better to confirm with the plugin’s support.
-
Hi Ying, i try it
<a class='likelink' href='$link' title='$title'><svg width="64px" height="64px" viewBox="0 0 24 24" id="Line" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><line id="primary" x1="4" y1="21" x2="20" y2="17" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></line><path id="primary-2" data-name="primary" d="M4,17l16,4m-8-6a4.58,4.58,0,0,0,4.67-4.67C16.67,7,13.33,7,13.32,3A6.92,6.92,0,0,0,10,8.33a3.29,3.29,0,0,1-1.33-2,7.18,7.18,0,0,0-1.34,4C7.33,12.43,8,15,12,15Z" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px"></path></g></svg> $title</a>";But not working, broke my website.
-
Please check with the plugin’s support team for further help.
Thanks!
- You must be logged in to reply to this topic.