Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
noie

Floating pagination arrows for blog not showing in Chrome — Farro

Question

Hello everyone.

The floating pagination arrows for blog posts present in the Farro template aren't showing up for me in Chrome browsers. It seems like this is a known issue, specifically with these arrow symbols not showing in Chrome, as I believe the arrow referenced here (https://stackoverflow.com/questions/27265831/google-chrome-is-not-showing-arrow-sign) is the same one used for Farro's blog's floating pagination arrows, though I may be wrong.

My website is still unpublished, so I can't link it.

Has anyone else experienced this issue?

Is it possible to replace the default symbols for the Farro template floating pagination arrows in blog posts? Is it possible via css?

 

Below is some code for reference. I believe the red text is the arrow icons specifically. If necessary, I'd like to replace the default arrows with these:
Right — https://fontawesome.com/icons/angle-right?style=solid
Left — https://fontawesome.com/icons/angle-left?style=solid&from=io.

 

Please let me know if any additional information is needed to solve this issue. Thanks in advance.

 

————————

FOR REFERENCE

————————

 

CSS:

.tweak-icon-weight-heavy .Icon--caretLarge--left, .tweak-icon-weight-heavy .Icon--caretLarge--right, .tweak-icon-weight-heavy .Icon--caretSmall--left, .tweak-icon-weight-heavy .Icon--caretSmall--right

 

HTML:

<nav class="BlogItem-pagination clear BlogItem-pagination--loaded" data-controller="BlogItemPaginationArrows" data-controllers-bound="BlogItemPaginationArrows">

    
      <a href="/home/traveling-with-some-intention" class="BlogItem-pagination-link BlogItem-pagination-link--prev">
        <svg class="Icon Icon--caretSmall--left BlogItem-pagination-icon" viewBox="0 0 9 16">
          <use xlink:href="/assets/ui-icons.svg#caret-left-small-icon"></use>
        </svg>
<!--
        --><div class="BlogItem-pagination-content">
          <h4 class="BlogItem-pagination-title">BLOG POST TITLE</h4>
          <div class="BlogItem-pagination-meta"><!--

Author

--><span class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--author">AUTHOR NAME</span><!--

Date

--><time class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--date" datetime="2019-10-11">October <span>11, </span>2019</time></div>
        </div>
      </a>
    

    
      <a href="/home/traveling-with-intention" class="BlogItem-pagination-link BlogItem-pagination-link--next">
        <div class="BlogItem-pagination-content">
          <h4 class="BlogItem-pagination-title">BLOG POST TITLE </h4>
          <div class="BlogItem-pagination-meta"><!--

Author

--><span class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--author">AUTHOR NAME</span><!--

Date

--><time class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--date" datetime="2019-10-10">October <span>10, </span>2019</time></div>
        </div><!--
        --><svg class="Icon Icon--caretSmall--right BlogItem-pagination-icon" viewBox="0 0 9 16">
          <use xlink:href="/assets/ui-icons.svg#caret-right-small-icon"></use>
        </svg>

      </a>
    

  </nav>

Share this post


Link to post

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...