Single Post: article navigation arrows (chevrons) are not visible

Support
#1

Hi there, I just noticed after updating to the latest version of X that the article navigation arrows (chevrons) are missing on the single post view.

Currently I have a custom function to show the ‘chevrons’:
function x_entry_navigation() {
$stack = x_get_stack();
if ( $stack == ‘ethos’ ) {
$left_icon = ‘’;
$right_icon = ‘’;
} else {
$left_icon = ‘’;
$right_icon = ‘’;
}
$is_ltr = ! is_rtl();
$prev_post = get_adjacent_post( true, ‘’, false );
$next_post = get_adjacent_post( true, ‘’, true );
$prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
$next_icon = ( $is_ltr ) ? $right_icon : $left_icon;
?>


<?php if ( $prev_post ) : ?>

<?php echo $prev_icon; ?>

<?php endif; ?>
<?php if ( $next_post ) : ?>

<?php echo $next_icon; ?>

<?php endif; ?>

#2

Hi there,

Thanks for writing in! I checked your code and I see your icons are just an empty string:

$left_icon = '';
$right_icon = '';
} else {
$left_icon = '';
$right_icon = '';
}

This could be the reason you’re not seeing any icon. To fix the issue, just remove your custom code or you can add the following CSS in the Theme Options > CSS: to show the custom icons:

.x-icon-chevron-right:before {
    content: "\f054";
}

.x-icon-chevron-left:before {
    content: "\f053";
}

You can find the icon codes here https://fontawesome.com/v4.7.0/icons/

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#3

Thanks. Strange that the chevrons code went blank. The forum editor is changing the code pasted in. Anything between double quotes is blank.
How do you paste code into this editor without losing information?

#4

Hi again,

After pasting the code in editor, select the code first and then click on Preformatted Text button (see screenshot)

Did you try the CSS, instead of custom code you can change the icons using CSS code only.

Hope this helps!

#5

Hi, yes I tried that and the content between double quotes " " is blank. But I have enough info now to fix it. Thanks.

#6

Glad we could help.

Cheers!

#7

Interestingly, the icons (social and search) in the navbar were also missing.

<i class="x-icon x-icon-facebook" data-icon=""></i>
<i class="x-icon x-icon-linkedin" data-icon=""></i>
<i class="x-icon x-icon-youtube" data-icon=""></i>
<i class="x-icon x-icon-envelope-o" data-icon=""></i>

Using your css solution fixed it.

#8

Hi @Mbzo,

Thank you so much for sharing. We really appreciate it. :slight_smile:

#9

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