How can I put font awesome icons inside symfony 5 fields

user_16666124 0
Viewed 472

I'm trying to create Symfony forms, and I want to use fontawesome icons inside the fields of symfony forms. In the twig config file i set the theme of bootstrap

I'm a beginner in symfony

I made a small example for my question:

that is my Controller Class:

<?php

namespace App\Controller;

use  App\Form\UserType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class CreateUserController extends AbstractController
{
    #[Route('/create-user', name: 'create_user')]
    public function index(): Response
    {   
        $user= array();
        $form= $this->createForm(UserType::class, $user);
        return $this->render('create_user/index.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

that is the UserType Class:

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;


class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', TextType::class)
        ;
    }

}

that is the twig template:

{{ form_start(form) }},
    {{ form_widget(form) }}
{{ form_end(form) }}

the result of the current Code: See the screenshot [![enter image description here][1]][1]

What I want to be the field it's like this with font awesome icon:

[![enter image description here][2]][2]

Thank you very much [1]: https://i.stack.imgur.com/q5Zo1.png [2]: https://i.stack.imgur.com/rwCZ6.png

font-awesome symfony-forms twig
1 Answers

this is more of a problem on HTML / CSS than on symfony.

for information, You can add a class like this:

    $builder
    ->add('name', TextType::class, [
            'label' => 'Name',
            'attr' => [
                'class' => 'btn btn-info MyClass',
            ],
        ]
    );

for rendering the form (You can also add a class like this on the name element of the form )

{{ form_start(form) }},
     {{ form_row(form.name, {'attr': {'data-row-class': 'my-row-class'} }) }}
{{ form_end(form) }}

But in css it is simple:

input
{
    font-size: 2em;
    border: 1px solid hsl(0, 0%, 70%);
    border-radius: 0.25em;
    padding: 0.5em;
}

input[type="text"]
{
    padding-left: 3em;
    background:
    url(https://bittersmann.de/selfhtml/images/12194.svg) 0.5em 
    center / 
    1.5em 1.5em no-repeat,
    linear-gradient(to right, hsl(0, 0%, 90%) 2.5em, hsl(0, 0%, 70%) 
    2.5em, hsl(0, 0%, 70%) calc(2.5em + 1px), transparent calc(2.5em 
    + 1px));
}

and html (for example). Your html will be generated by twig:

<input type="text"/>

You just have to inspect your elements using your web browser to apply css on your html element generated by twig.

There are different ways to do this, but I think with CSS it is "lighter"

Enjoy !

user_120602410
Related