Results 1 to 3 of 3

Thread: font-awesome icons in search input

  1. June 6th, 2015 #1
    brianjester
    brianjester is offline
    Thread Starter
    brianjester's Avatar
    Join Date
    Jun 2013
    Location
    United States
    Posts
    260
    Thanks
    2
    Thanked 4 Times in 4 Posts

    font-awesome icons in search input

    Hi,

    Can someone shed some light as to why the font-awesome icon is not showing inside the search input box? It will show outside the box. Here's my code:


    This is in my header.php file:

    Code:
    <input name="s" type="text" id="s" tabindex="1" class="editbox_search fa fa-search" style="<?php cp_display_style( 'search_field_width' ); ?>" value="<?php the_search_query(); ?>" placeholder="<?php esc_attr_e( '&nbsp;What are you looking for?', APP_TD ); ?>" />
    This is in my style.css file:
    Code:
    @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
    Note: If I add the <span class="fa fa-search"></span> that DOES WORK, but it doesn't show inside the input, rather next to it.

    What's the trick?

    Brian
    ----------------------------------------------------------------------
    World Class Ads - Classified Advertising Worldwide!

    Http://www.worldclassads.com

    http://worldclassads.com/classifieds/link-partners/

    We offer Free and / or Featured Classified Ads as well as Free Text and / or Banner Reciprocal Link Exchanges
    ----------------------------------------------------------------------
    Reply With Quote Reply With Quote
  2. June 6th, 2015 #2
    brianjester
    brianjester is offline
    Thread Starter
    brianjester's Avatar
    Join Date
    Jun 2013
    Location
    United States
    Posts
    260
    Thanks
    2
    Thanked 4 Times in 4 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    ----------------------------------------------------------------------
    World Class Ads - Classified Advertising Worldwide!

    Http://www.worldclassads.com

    http://worldclassads.com/classifieds/link-partners/

    We offer Free and / or Featured Classified Ads as well as Free Text and / or Banner Reciprocal Link Exchanges
    ----------------------------------------------------------------------
    Reply With Quote Reply With Quote
  3. June 7th, 2015 #3
    talent
    talent is offline
    talent's Avatar
    Join Date
    Jul 2011
    Location
    London UK
    Posts
    3,497
    Thanks
    75
    Thanked 553 Times in 502 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    $function ('CUSTOMIZATION'); } else { .DESIGN { display: awesome; }
    If you require any additional functionality or design customization, just ask. Afterall... anything is possible! However, I may not know how to implement your particular request, but if you don't ask, you don't get

    If you build it, they will come...

    Reply With Quote Reply With Quote
« Clickable link in a translation (po) file. | Prevent delete ads by users »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. How to use font awesome on header menu?
    By hmppark7 in forum Help Using HireBee
    Replies: 0
    Last Post: October 29th, 2014, 11:53 PM
  2. [SOLVED] Font Awesome Icons not showing
    By augustsixr in forum Flatter
    Replies: 1
    Last Post: May 9th, 2014, 11:11 AM
  3. [SOLVED] Changing the html above the Search input box
    By jrossmacleod in forum Help Using Vantage (Legacy)
    Replies: 2
    Last Post: January 16th, 2014, 06:10 PM
  4. search input box became smaller and data can't be inputted
    By dunkin in forum Help Using ClassiPress
    Replies: 1
    Last Post: July 8th, 2011, 08:42 AM