1. Home
  2. Forum
  3. Blazor
  4. Using "FA-ICONS" in SfTextBox

Using "FA-ICONS" in SfTextBox

Dear Team

Can you please explain how i can use FA-ICONS in my SFTEXTBOX Control ?

Thank You

1 Reply 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team May 17, 2021 02:55 PM UTC

Hi Raheel, 

Greetings from Syncfusion support. 

We can append the font-awesome icon in front of the TextBox using AddIcon method as mentioned below. 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Blazor_Server</title> 
    <base rel='nofollow' href="~/" /> 
    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 
    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 
    <link rel='nofollow' href=https://cdn.syncfusion.com/blazor/19.1.59/fabric.css rel="stylesheet" /> 
 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 
</head> 

<SfTextBox @ref="person" Placeholder="Enter Mobile No" Created="@onPersonCreated"></SfTextBox> 
       @code{ 
            SfTextBox person; 
 
            public void onPersonCreated() 
            { 
                this.person.AddIcon("prepend", "fa fa-phone"); 
            } 
        } 

Screenshot: 
 
 

Regards, 
Ponmani M 


Marked as answer
Loader.
Up arrow icon