How to add beautiful banner like discourse home page

Product Support
8

I tried to replace the old icons with a new one and upload them but nothing happen
check

icons
icons1477×719 48.1 KB

{{#if (and shouldShow discoveryRoute)}}
  <div class="custom-homepage-wrapper">
    <div class="wrap custom-homepage">
      <div class="welcome-wrapper">
        <div class="welcome-content">
          <h2>{{theme-i18n "meta_banner.welcome"}}</h2>
          <p>{{theme-i18n "meta_banner.subtitle"}}</p>
        </div>
        <div class="featured-todo">
          <div>
            <a href="https://forum.ongurutips.com/search?expanded=true">
              <h3>{{d-icon "info-circle"}}
                {{theme-i18n "meta_banner.docs"}}</h3>
            </a>
          </div>
          <div>
            <a href="https://www.fiverr.com/phenix1997">
              <h3>{{d-icon "fab-discourse"}}
                {{theme-i18n "meta_banner.themes"}}</h3>
            </a>
          </div>
          <div>
            <a href="https://ongurutips.com">
              <h3>
                {{d-icon "fab-discourse"}}
                {{theme-i18n "meta_banner.hosting"}}</h3>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
{{/if}}

my new icons ! png format

blogging
blogging512×512 19.7 KB

check https://forum.ongurutips.com