1. Conzeptwerk
  2. Features Request
  3. Monday, May 18 2020, 09:00 AM
Hello,

i want to put some icons in front of the input like in my screenshot. Is there an easy posibilitiy?

thanks for reply
admin Accepted Answer
Admin
Hi,
yes, it is possible, try to see this reply https://www.easy-profile.com/support/font-awesome.html#reply-25955

In the reply we use just the icon but you can change the override text to show icon and text with a code like this:
<i class="icon icon-mail"></i> Email
  1. more than a month ago
  2. Features Request
  3. # 1
Conzeptwerk Accepted Answer
Pro
Content Protected
  1. more than a month ago
  2. Features Request
  3. # 2
admin Accepted Answer
Admin
Hi,
this is possible with CSS code but it is a bit complex. Another way is to override Joomla fields layout but this way is even more complex.

Unfortunately there is not a simple way.
  1. more than a month ago
  2. Features Request
  3. # 3
Conzeptwerk Accepted Answer
Pro
Ok, no Problem to built css. Is there somewhere an example to find?
  1. more than a month ago
  2. Features Request
  3. # 4
admin Accepted Answer
Admin
For example in this site a code like following will make a result like screenshot:
.email1-group .controls:before {
content: "\f0e0";
font: normal normal normal 14px/1 FontAwesome;
float:left;
width:30px;
padding-top:7px;
text-align: center;
background:#ddd;
border:1px solid #ccc;
border-right:0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
height:32px;

}
.email1-group .controls input{
width:calc(100% - 30px) !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
display:block;
}


But keep in mind that in this code we use Font-Awesome (Joomla default template uses icomoon) and the height of the icon box is the same of the input (so it is related to your template)
Attachments (1)
  1. more than a month ago
  2. Features Request
  3. # 5
Conzeptwerk Accepted Answer
Pro
Perfect! Thanks a lot!
The only question i have is to put the label into input (as shown in my screenshot)
  1. more than a month ago
  2. Features Request
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.