Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #251083

    Hello Everyone,
    I’m trying to place a telephone number and small telephone icon to show on the right hand side of my website just above the site search bar in the sites header but can’t find how to do it?
    I assume, I need to add some code to the header.php file, I’m using the latest version of Abundance.
    Please can you help with the codeI I could use to get it to work?
    Thanks :-)

    #251459

    Hi Brevemusic!

    I recommend to place your custom code below this code in header.php:

    
    					get_search_form();
    					?>
    

    – i.e. like:

    
    					get_search_form();
    					?>
    					<span class="phonenumber">045545564556</span>
    

    and then use some css code -i.e:

    
    .phonenumber{ color: #333; }
    

    to change the font color, position, etc. of the number span element.

    Regards,
    Peter

    #251528

    HI Peter,
    Thanks for you prompt reply, that worked a treat!
    Is it also possible to provide some code to insert a small telephone graphic/icon just in front of the telephone number?

    Thanks again :-)

    #251583

    Hi!

    Please go to Appearance > Editor and open Functions.php file and find
    /*advanced title + breadcrumb function*/
    and add following code right above it

    add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
    function enqueue_awesome() {
    	wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
    }

    This will add font awesome to your theme. You can see available fonts here – http://fortawesome.github.io/Font-Awesome/icons/
    then open header.php file and add following line right in front of your phone number

    <i class="fa fa-phone"></i>

    Cheers!
    Yigit

    #251747

    Thanks Peter & Yigit for all your help!
    That works perfectly…. :-)

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘How To Add Telephone Number & Small Icon In The Header?’ is closed to new replies.