[Rank Math SEO Plugin] Any idea how to setup font awesome icons instead of default breadcrumbs separator?

[ibrempashaev]

Hello!
The question is in title : )
I tried different variants with no success, I see just a plain text.

These are not working:

<i class="fa fa-caret-right" />

 

<span class="fa fa-caret-right" />

 

<div class="fa fa-caret-right" />

And I think point is that Rank Math wraps custom separator in span tag, and the fact is confirmed by final page source code... Is this fixable in any way?

Edited October 4, 2018 by ibrempashaev
Fixed typo 2

[Pratik.d]

Hello,

You can change the separator to FontAwesome icon using rank_math_breadcrumb_html filter. There is no need to change anything in CSS.

Below is an example usage of this filter:

add_filter( 'rank_math_breadcrumb_html', 'breadcrumb_html_callback', 10, 3 );

function breadcrumb_html_callback( $html, $crumbs, $class ) {
  $html = '';
  $size   = sizeof( $crumbs );
  foreach ( $crumbs as $key => $crumb ) {

      if ( ! empty( $crumb[1] ) && $size !== $key + 1 ) {
        $html .= '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
      } else {
        $html .= '<span class="last">' . esc_html( $crumb[0] ) . '</span>';
      }

      if ( $size !== $key + 1 ) {
        $html .= '<i class="fa fa-caret-right"></i>';
      }
    }

  return $html;
}

This code will replace separator with the FontAwesome icon; please add it to your active theme's functions.php file.

Hope that helps. Thank you.

[ibrempashaev]

seo-by-rank-math/includes/class-breadcrumbs.php:

        foreach ( $crumbs as $key => $crumb ) {

            $html .= $args['before'];

            if ( ! empty( $crumb[1] ) && $size !== $key + 1 ) {
                $html .= '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
            } else {
                $html .= '<span class="last">' . esc_html( $crumb[0] ) . '</span>';
            }

            $html .= $args['after'];

            if ( $size !== $key + 1 ) {
                $html .= '<span class="separator"> ' . $this->settings['separator'] . ' </span>';
            }
        }

If I change 

$this->settings['separator']

to 

'<span class="fa fa-caret-right" />'

then it works perfectly!

Also I tried copy-paste final page source code from Chrome, it looks escaped --  &lt; instead of < and &gt instead of >  So, after all, this separator value seems to be stored as escaped text. Could you please fix this?

 

Edited October 4, 2018 by ibrempashaev

[Jitendraa]

Hello,

You can use CSS to cover your requirement.

Let us know the direct URL to the page where you have the breadcrumb and the FA icon you want instead so that we'll help you with that.

Looking forward to your reply.

Thank you.

[ibrempashaev]

It's no use... 
1) Of course I can setup css like so:

nav.rank-math-breadcrumb p span.separator:before {
    content: " \F0DA";
    font-family: FontAwesome;
}

But then how to setup icon for label in the breadcrumbs beginning (before homepage link)? Plugin code creates special label before homepage link if label is not empty only. But I don't want this visible text label there, I need to setup _just_single_icon_ - fa-home 
This CSS is not working if I didn't setup the label in Rank Math breadcrumbs settings:

nav.rank-math-breadcrumb p span.label:before {
    content: "\F015";
    font-family: FontAwesome;
}

2) It's not user-friendly. For example, Yoast allows such modification through admin panel

[ibrempashaev]

Working solution.

Breadcrumbs separator:

nav.rank-math-breadcrumb p span.separator:before {
    content: " \F0DA";
    font-family: FontAwesome;
}

Homepage label (it works normally with two spaces for homepage label after glyph code only )

nav.rank-math-breadcrumb p:before {
    content: "\F015  ";
    font-family: FontAwesome;
}

Plugin settings:

Final breadcrumbs:

 

Edited October 5, 2018 by ibrempashaev

[ibrempashaev]

Summary (personal opinion):
1) Not user-friendly
2) Crutch
3) Could be broken if plugin code will be changed.

Please, consider adding more flexible settings for breadcrumbs

[Pratik.d]

Hello,

You can change the separator to FontAwesome icon using rank_math_breadcrumb_html filter. There is no need to change anything in CSS.

Below is an example usage of this filter:

add_filter( 'rank_math_breadcrumb_html', 'breadcrumb_html_callback', 10, 3 );

function breadcrumb_html_callback( $html, $crumbs, $class ) {
  $html = '';
  $size   = sizeof( $crumbs );
  foreach ( $crumbs as $key => $crumb ) {

      if ( ! empty( $crumb[1] ) && $size !== $key + 1 ) {
        $html .= '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
      } else {
        $html .= '<span class="last">' . esc_html( $crumb[0] ) . '</span>';
      }

      if ( $size !== $key + 1 ) {
        $html .= '<i class="fa fa-caret-right"></i>';
      }
    }

  return $html;
}

This code will replace separator with the FontAwesome icon; please add it to your active theme's functions.php file.

Hope that helps. Thank you.