how to display icon as place holder in using SLDS componets

I am trying to display comment icon as a place holder for a text field but not able to add it as expected.

Following is the peace of code i am refering

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<style>
  .inputFieldClass
   {
        height: 40px;
        width: 400px;
        /* color: green; */
        /*border-color: green;*/
        background-image: "http://icons.iconarchive.com/icons/bokehlicia/captiva/256/chat-bubbles-icon.png" ;
        background-repeat: no-repeat;
        text-indent: 20px;
   }
   

</style>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

    <head>
        <apex:slds />
    </head>    
    <body>
        <div class="slds-scope">
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-6">
                    <ul class="slds-list--vertical slds-has-inline-block-links--space">
                        <li class="slds-list__item"><a href="#void">Geeting started</a></li>
                        <li>
                            <ul class="slds-list--vertical slds-is-nested">
                                <li class="slds-list__item"><a href="#void">Find a place</a></li>
                                <li class="slds-list__item"><a href="#void">Experience</a></li>
                            </ul>
                        </li>
                        <li class="slds-list__item"><a href="#void">Booking your trip</a></li>
                        <li class="slds-list__item"><a href="#void">Payments</a></li>
                        <li class="slds-list__item"><a href="#void">Yours Trips</a></li>
                    </ul>
                </div>
                <div class="slds-col slds-size_5-of-6">
                    <div id="mydiv" class="slds-size_1-of-2 slds-p-top_x-large" >      
                            <h5 class="slds-text-heading_large" style="font-weight: 600;">How are we doing ?</h5>
                    </div>
                    <div class="slds-p-top_medium">
                        We are always there to improve our expeience so we would love to hear what's working and how we could make it better.
                    </div>
                    <div class="slds-p-top_medium">
                        <h1 style="display:inline ;font-weight: 700;" >This isn't the way to contact us ,through. </h1>
                        We can't reply to bug report indvijually. If you have question regarding solving problem. you will find answer in help center or you can 
                        <h1 style="color: darkseagreen;"><a href="">contact us. </a></h1>      
                    </div>
                    <div class="slds-p-top_xx-large">
                        <div style="font-weight :600 ;">
                            What would you like to do ?  
                                <div class="slds-grid slds-gutters">    
                                &#xf075;
                                    <div class="form-group" style="font-weight :500 ;">
                                        <span class="inputFieldClass11"><i class='icon-search'></i></span>
                                        <input name="firsttext" class="inputFieldClass" placeholder="&#xF002; dsafffffffffff" onchange="hideImage()"/>  
                                        <input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />
                                        <textarea placeholder='&#xf075; Add Comment'></textarea>
                                    </div>
                                    <div class="slds-col">
                                        <span>2</span>
                                    </div>
                                </div>    
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </body>

    </html>
</apex:page>

March 21, 2019
·
Like
0
·
Follow
1

Best Answer chosen by Hitesh chaudhari

Santosh Reddy Maddhuri
Hi ImNick,

Here is the modified code using native lightningsystem design icons.

Code :
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> <head> <apex:slds /> </head> <body> <div class="slds-scope"> <div class="slds-grid"> <div class="slds-col slds-size_1-of-6"> <ul class="slds-list--vertical slds-has-inline-block-links--space"> <li class="slds-list__item"><a href="#void">Geeting started</a></li> <li> <ul class="slds-list--vertical slds-is-nested"> <li class="slds-list__item"><a href="#void">Find a place</a></li> <li class="slds-list__item"><a href="#void">Experience</a></li> </ul> </li> <li class="slds-list__item"><a href="#void">Booking your trip</a></li> <li class="slds-list__item"><a href="#void">Payments</a></li> <li class="slds-list__item"><a href="#void">Yours Trips</a></li> </ul> </div> <div class="slds-col slds-size_5-of-6"> <div id="mydiv" class="slds-size_1-of-2 slds-p-top_x-large" > <h5 class="slds-text-heading_large" style="font-weight: 600;">How are we doing ?</h5> </div> <div class="slds-p-top_medium"> <p> We are always there to improve our expeience so we would love to hear what's working and how we could make it better.</p> </div> <div class="slds-p-top_medium"> <p> <h1 style="display:inline ;font-weight: 700;" >This isn't the way to contact us ,through. </h1> We can't reply to bug report indvidually. If you have question regarding solving problem. you will find answer in help center or you can <h1 style="color: darkseagreen;"><a href="">contact us. </a></h1> </p> </div> <div class="slds-p-top_xx-large"> <div style="font-weight :600 ;"> <p>What would you like to do ?</p> <div class="slds-grid slds-gutters"> <div class="form-group" style="font-weight :500 ;"> <div class="slds-form__row slds-m-top_small slds-m-left_small"> <div class="slds-form-element slds-p-right_small"> <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left"> <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true"> <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#search')}"></use> </svg> <input type="text" id="text-input-id-1" class="slds-input" placeholder="dsafffffffffff" /> </div> </div> <div class="slds-form-element slds-p-right_small"> <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left"> <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true"> <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#search')}"></use> </svg> <input type="text" id="text-input-id-2" class="slds-input" placeholder="Search" /> </div> </div> <div class="slds-form-element slds-p-right_small"> <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left"> <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true"> <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#chat')}"></use> </svg> <textarea placeholder=' Add Comment' class="slds-textarea"></textarea> </div> </div> </div> </div> <div class="slds-col"> <span></span> </div> </div> </div> </div> </div> </div> </div> </body> </html> </apex:page>

Screenshot :

Hope this helps!

Regards,

Santosh.

March 21, 2019
·
Like
0
·
Dislike
0

This was selected as the best answer

Hitesh chaudhari
Thanks buddy .. Works perferct

March 22, 2019
·
Like
1
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

how to display icon as place holder in using SLDS componets

All Answers

You need to sign in to do that.