Icon personalized

Support
#1

Hello everyone, I’d like to add a custom icon instead of the icon home.
Would you know how to do it?
thank you

#2

Hi Smith,

You can customize the icon by adding this php code in the functions.php of your child theme.

  function x_breadcrumbs() {

    $args_items = array(
      'item_before'      => '',
      'item_after'       => '',
      'label_before'     => '',
      'label_after'      => '',
      'delimiter_before' => ' <span class="delimiter">',
      'delimiter_after'  => '</span> ',
      'delimiter_ltr'    => '<i class="x-icon-angle-right" data-x-icon-s="&#xf105;"></i>',
      'delimiter_rtl'    => '<i class="x-icon-angle-left" data-x-icon-s="&#xf104;"></i>',
      'current_class'    => 'current',
      'anchor_atts'      => array(),
      'include_meta'     => false,
    );

    // EDIT THE ICON HERE
    $icon = do_shortcode('[x_icon type="home"]');

    $args_data = array(
      'home_label' => '<span class="home">' . $icon .' <span class="visually-hidden">' . __( 'Home', '__x__' ) . '</span></span>',
    );

    if ( x_get_option( 'x_breadcrumb_display' ) ) {
      echo '<div class="x-breadcrumbs">' . x_breadcrumbs_items( x_breadcrumbs_data( $args_data ), $args_items ) . '</div>';
    }

  }

Change this code [x_icon type="home"] to any of the icons listed here http://demo.theme.co/integrity-1/shortcodes/icons/.

Let us know how it goes.

Thanks!

#3

thank you, but I would like to add a personal icon. Here, if I understand correctly, you can change the icon with the libraries already integrated in the Pro theme. But, in my case, it’s not an icon belonging to a library.

#4

If, I modify your code in this way; is it likely to create conflict? I do not need the icon to stay dynamic.

    // EDIT THE ICON HERE

    $icon = <img src="icon/iconpersonal.jpg">;
#5

Hi Smith,

Yes you can update the code to use img tags and it will not create conflicts. Just make sure to enclose the html with single quotations. Like this

$icon = '<img src="icon/iconpersonal.jpg">';

Hope that helps.

1 Like
#6

Thank you for your reply ! but unfortunately, it does not seem to work.
I’m enclosing a capture of the code added in function.php of the child theme

I think it comes from where the image is posted on the FTP. But if that’s the case, I do not see where I need to post it :confused:

#7

Hey Smith,

Kindly remove the custom code you have added to the child theme.

Follow these steps instead:

#1 Set the Home Label Type to Text.

#2 Then set the Home Label to the image HTML code to: <img src="http://www.garopole.fr/wp-content/uploads/icon/icon-cabs-arriane.png" />

Hope this helps.

1 Like
#8

so, it works in the visual but it shows the html once I go on the page without “edit with pro”

#9

Hi Smith,

In that case, try putting back the code suggested by Albretch. The issue there is your image source. If you have uploaded the image on media library, please copy and put the entire image URL and it should work as expected. Something like this using absolute image URL:

$icon = '<img src="http://www.garopole.fr/wp-content/uploads/icon/icon-cabs-arriane.png">';

Hope this helps.

#10

Hello, unfortunately, it does not work :confused:
I really feel that he can not recover the image.

#11

Hi Smith,

Please add the URL of the image into the Address bar of your browser and see if you can see the image. If not then the URL is not correct.

I suggest that you get back to us with the URL/User/Pass of your website so that we can double-check the case. You can use the Secure Note to share the information with us.

Thank you.

1 Like
#12

I created a secure note.
The address of the image is good.

#13

Hi Smith,

The code is correct. I think this is cache issue. Please try to clear cache from your plugin. If there is caching on your server, please try to clear it too. Check again after that.

#14

Hello, we had problems with our old server. We changed that. I give you new access to the site. I kept the changes.

#15

Hello Paul,

The image is displaying in your breadcrumbs already.

Please keep in mind that since you have installed a caching plugin WP Rocket, you will need clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Check your breadcrumbs now.

#16

hello, thank you for your help. Actually now, I see the icon on the articles and I disable the wp-rocket plugin for the moment. But, is it normal that the icon does not appear on the pages?
(see the link: http://www.mawweb.fr/home-page/pole-solidarite/politique-de-la-ville/)

On articles, the icon is displayed without worry.
maybe it’s something completely different? We use on the pages the elements “breadcrumbs”

#17

Hello Smith,

You cannot add a custom image in the breadcrumb element. It needs to be added by a custom css. To resolve your issue, please add the following CSS code in the Pro > Theme Options > Global CSS (http://prntscr.com/evui3r) which I already did.

.x-crumbs-list-item:nth-child(1) a.x-crumbs-link {
    background: url(http://www.garopole.fr/wp-content/uploads/icon/icon-cabs-arriane.png);
    background-size: contain;
    width: 50px;
    height: 50px;
}

.x-crumbs-list-item:nth-child(1) a.x-crumbs-link .x-icon:before {
    content: "";
}

We would love to know if this has worked for you. Check your site now.

Thank you.

#18

it works !
thank you for your help and patience!

#19

You’re welcome.

1 Like
#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.