Question about the icons.

Created on 16 October 2024, 2 months ago

Hello. Question about the icons. How to implement an icon title with h1...h5 tags? How to center the title?

πŸ“Œ Task
Status

Active

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @zub00
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    To replace the html tag for the icon from div to h1....h5, you will have to update the twig template. There is a custom twig template for this bundle inside ../paragraphs_bundles/modules/paragraph_bundle_icon/templates/paragraph--icon-bundle.html.twig. You can copy this template to your theme and update the html tag from div to h1....h5.

    Best wishes,
    Alaa

  • //

    {{ content.pb_content_title }}

    Apparently, this section of code is responsible for h1....h5.
    But how to add centering?

    ???

  • Replacement with code
    h3 class="pb__content-title">{{ content.pb_content_title }}

    I change the "pb__content-title" class to "text-align-center"

    Then centering works

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    I'm glad it worked! If you're not modifying any HTML tags, there's no need to override the template. You can achieve the same result by simply applying CSS to the h3.pb__content-title element:

    h3.pb__content-title {
      text-align: center;
    }

    Best wishes,
    Alaa

  • Thank you. Added code h3.pb_ content-title { text-align: center;
    }

    in the Solo theme settings, in the "CSS Injector" section

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024