Home Forums General Issues URL => Image


URL => Image

  • Hey all,

    In my footer i want to have social icons.
    These social icon links are going to be filled in on the back end of wordpress.

    this works great, but when i call on the_field(‘facebook’, ‘option’); the url displays on the front-end ( but i would like to change that to an facebook icon. so when you click on the icon, you will go to

    is this possible?

  • That’s not really something that ACF will do for you.

    You have a few choices.

    You can use CSS to replace the text in the link with the icon image you want to use. This will probably require altering the HTML and maybe how the field is output.

    You can use an icon set that has the icons you want, for example This is a font icon set used in several of the more recent default WP themes (2013, 2014, 2015) and you can see examples of how to use them by taking a look into those themes. Again, will require CSS work and maybe some HTML changes.

    You can supply another field that allows you to upload an image file to use for the icon and use that along with the url to construct a the link. This will also need some changes to the HTML and CSS.

  • Awesome , that worked!

    no i have the next problem
    it is no link.

    i have tried :

    <div class="facebook-test"> 
    <?php if(!empty(the_field('facebook' , 'option')) ) {   ?>
    	 <a href="<?php the_field('facebook' , 'option'); ?>" target="_blank"> </a> 
    	<?php } ?> 

    and :

    <?php if( get_field('facebook' , 'option') ): ?>
    	 My field value: <a href="<?php the_field('facebook' , 'option'); ?>"> </a> 
    <?php endif; ?>
    	<br /> 

    hoe can i make this image a link ? (the image or the tekst is no link) in the back-end i selected URL

  • Are you using the last one I mentioned? Using an image field?

  • would this work? :

    <?php $facebook_url = get_field('facebook' , 'option');
    if( $facebook_url ): 
    echo '<a target="_blank" class="facebook_icon" href="'.$facebook_url.'"><img src="" alt="facebook-icon"></a>';
    //change src of facebook to your server 
    endif; ?>
  • Yes! awesome mediawerk Thank you very much
    John also a big thanks! you guys helped me out a lot!

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

The topic ‘URL => Image’ is closed to new replies.