How to add Icons to TYPO3 bootstrap package

I have bootstrap_package 11 and I want to add TikTok to the social media channels.

What I did so far:
In my Site Package I added the following to constants.typoscript:

page {
  theme {
    socialmedia
    enable = 1
    channels {

      facebook {
        label = Facebook
        # cat=bootstrap package: social media/165/01_facebook_url;     type=string; label=Facebook: Insert the full account url
        url = https://www.facebook.com/MY_CHANNEL
      }
      instagram {
        label = Instagram
        # cat=bootstrap package: social media/165/01_facebook_url; type=string; label=Facebook: Insert the full account url
        url = https://www.instagram.com/MY_CHANNEL
      }
      youtube {
        label = Youtube
        url = https://www.youtube.com/channel/MY_CHANNEL
      }
      tiktok {
        label = TikTok
        url = https://www.tiktok.com/@MY_CHANNEL
      }
    }
  }
}

Facebook, Instagram and Youtube show up in the constant editor and on the footer of my page.

After some research and a hint from the community it turns out that bootstrap_package is carefully optimized and includes a very small number of bootstrap icons, not including the TikTok icon.

I tried various ways to override the default icon set to no avail. Is there any decent way to add an icon to the boostrap icons set?

Solution

bootstrap_package have only a limited set of icons.

If you want to have more icons, you can install this extension:
quellenform/t3x-iconpack-bootstrap

The extension quellenform/t3x-iconpack, on which this is based, is also added.

Next, add the iconpack TypoScript with your TypoScript template in BE - add it at the end of your TypoScript so that it's not overwritten by bootstrap_package.

Then you can override the template EXT:bootstrap_package/Resources/Private/Partials/Page/Structure/SocialLinks.html with your own EXT:your_ext/Resources/Private/Partials/Page/Structure/SocialLinks.html

This contains the following HTML code, for example:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
  xmlns:i="http://typo3.org/ns/Quellenform/Iconpack/ViewHelpers"
  data-namespace-typo3-fluid="true">

<f:if condition="{theme.socialmedia.channels}">
    <div class="sociallinks">
        <ul class="sociallinks-list">
            <f:for each="{theme.socialmedia.channels}" key="channelKey" as="channelOptions">
                <f:if condition="{channelOptions.url}">
                    <li class="sociallinks-item" title="{channelOptions.label}">
                        <a class="sociallinks-link" href="{channelOptions.url}" rel="noopener" target="_blank">
                            <i:icon iconfig="bi1,{channelKey}" additionalAttributes="{style:'color:#d3cfcf'}" />
                            <span class="sociallinks-link-label">{channelOptions.label}</span>
                        </a>
                    </li>
                </f:if>
            </f:for>
        </ul>
    </div>
</f:if>
</html>

The code <i:icon iconfig="bi1,{channelKey}" additionalAttributes="{style:'color:#d3cfcf'}" /> displays the required icon with an individual color.