Support » Plugin: Font Awesome » How insert in Oshine theme with Tatsu page builder

How insert in Oshine theme with Tatsu page builder

  • acuasif

    (@acuasif)


    11 months, 2 weeks ago

    hi, I can’t see the icons in my Oshine theme.
    I tried to insert the code in two ways:
    1 – using a specific shortcode module found in tatsu page builder
    2 – directly on a new empty page by entering the code with the blocks
    Unfortunately in any case the result is a circle without content …
    The conflict test says there are no problems.
    The link I provide is of the simple page made with blocks

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author mlwilkerson

    (@mlwilkerson)

    11 months, 2 weeks ago

    Looking at that page, one of those empty circles is from HTML markup that looks like this:

    <i class="tatsu-icon tatsu-custom-icon tatsu-custom-icon-class stroopwafel medium circle" data-animation="fadeIn" data-animation-delay="0"></i>

    The CSS classes being used there are not valid for Font Awesome.

    If I inspect that element in the DOM and edit the CSS classes, changing them to just “fas fa-stroopwafel,” the icon shows as expected.

    That means a few things:

    1. this plugin is loading Font Awesome correctly, as you’ve configured it.

    2. whatever means you’re using to add icons (maybe a shortcode provided by Oshine or tatsu?) is not producing standard Font Awesome CSS classes.

    It may also mean:

    3. Oshine or tatsu uses its own non-standard CSS classes for icons, and may or may not be using Font Awesome.

    Here’s a possible solution for you. Since we know that Font Awesome is being loaded correctly by this plugin, you could just use normal HTML <i> tags in the block editor or the shortcode provided by this plugin and avoid using any shortcodes or blocks provided by Oshine/tatsu.

    If you follow the usage guidance on this plugin’s readme, it will result in standard, valid Font Awesome CSS classes, and I expect it will work as expected.

    In this case, you could edit your block as HTML and just use this HTML <i> tag:

    <i class="fas fa-stroopwafel"></i>

Viewing 1 replies (of 1 total)
  • The topic ‘How insert in Oshine theme with Tatsu page builder’ is closed to new replies.

Topic Tags

Views