icons in the text fields

Hi @totalfly

Hope you are doing fine!

Yes, it is possible to display an icon on the right side of a text file. This can not be done out of the box though and some custom CSS code will be necessary. Try adding the following code under Appearance > Customize > Additional CSS

#text-1 input {
    padding-left: 25px;
    background: url(https://static.thenounproject.com/png/101791-200.png) no-repeat right;
    background-size: 20px;
}

Change the url to the image icon you need. This example is based on this article:
https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form

Hope this info helps!

Kind regards

Luis

so basically it would be possible but just with a background image, not with a font awesome font.. right?

Hi @totalfly

You will be able use font awesome as the label element for example

#text-1 label{
    position: relative;
}

#text-1 label:before {
    position: absolute;
    right: 10px;
    top: 30px;
    height: 30px;
    width: 30px;
    font-size: 1.3rem;
    object-fit: contain;
    font-family: "Font Awesome 5 Free"!important;
    font-weight: 900!important; 
    content: "\f133"!important;
}

https://monosnap.com/file/O3Ngua7aIC8HksdTaF0NdANi4G42xT

But the initial shared solution allows you to use a background URL from SVG which would fit well as a font awesome icon.

Best Regards
Patrick Freitas

Hello @totalfly ,

We haven’t heard from you for some time now, so it looks like you don’t have more questions for us.

Feel free to re-open this ticket if needed.

Kind regards
Kasia