Adding Image to Link Text

Options
codergrrl
codergrrl Member Posts: 1
in Ask a Question

Does anyone know if there is a way to add an icon to a text link without having to create an image file? Here is an example of what I am trying to accomplish.


Screenshot 2023-01-20 112142.png


Answers

  • jamjarrett
    jamjarrett Member Posts: 6
    Options

    I used to do this kind of thing all the time on a different CMS.

    I think you could do this using an icon font like font awesome by adding it as a custom font and adding the style sheet. You would have to drop down to the html level but it seems like it might work.

    Font Awesome Example

    I'll give it a try on Duda and let you know how it goes.

  • jamjarrett
    jamjarrett Member Posts: 6
    edited March 2023
    Options

    Sorry it is late but adding Font Awesome (FA) works for this kind of thing.

    I added a bullhorn to the sign-up form headline near the footer on our site:

    https://www.firstrevolution.com

    I followed "Upload Font Files to Duda" and "Embed Files on Duda via font-face" sections on this document:

    Integrate Custom Fonts Via @FontFace – Duda Support

    Copy the font-awesome.css into site.css. I left out the Bootstrap specific styles.

    I prefer using a span for adding the CSS, for example:

    <p><span class="icon-bullhorn" aria="hidden"><span> Attention</p>

    I used FA 3.2.1 to keep the file size small (CSS 25kb, WOFF 45kb) but version 4 would work fine too.

    Hope that helps next time.

Categories