How do I add additional social media platforms to the social media block in this theme?

I have found the zymphonies.com theme: composer require 'drupal/drupal8_parallax_theme:^2.0 a useful addition to my toolkit.

It comes with a banner slideshow built in, is designed to be mobile-first responsive, and being built on top of the bootstrap framework has proven useful to helping me learn a small bit of how to use bootstrap to easily enhance the stock framework provided by the theme/framework. Many questions are easily resolved by adding bootstrap to my query strings in search engines, leading to half or one hour fixes to address client requests.

One of the features offered out of the box by this theme is a block exposed in the footer region with icons linking a site visitor to the sites' channels on various social media platforms.

And that leads me to this question, and the answer I offer below for its resolution.

How do I add support for additional social media platforms not available out-of-the-box?

I started by using a regressive grep query of the theme to learn how the platforms supported by the existing code base are accounted for.

jenkins@efc9c26-01112:~/sites/my_client/web/themes/contrib/drupal8_parallax_theme$ grep linkedin -R . 
Binary file ./includes/fontawesome/fonts/FontAwesome.otf matches 
Binary file ./includes/fontawesome/fonts/fontawesome-webfont.ttf matches 
./includes/fontawesome/css/font-awesome.css:.fa-linkedin-square:before {
./includes/fontawesome/css/font-awesome.css:.fa-linkedin:before {
./templates/layout/page.html.twig:            {% if linkedin_url %}
./templates/layout/page.html.twig:              <a href="{{ linkedin_url }}" class="linkedin" target="_blank"><i class="fa fa-linkedin"></i></a>
./drupal8_parallax_theme.theme:  $variables['linkedin_url'] = theme_get_setting('linkedin_url');
./drupal8_parallax_theme.theme:  $form['drupal8_parallax_theme_settings']['social_icon']['linkedin_url'] = array(
./drupal8_parallax_theme.theme:    '#default_value' => theme_get_setting('linkedin_url'),
./config/install/drupal8_parallax_theme.settings.yml:linkedin_url: 'http://www.linkedin.com/company/zymphonies'

That provided the necessary clues to reverse-engineering what exists so I can replicate what I need to add. It also reveals what files I must touch to get the job done.

I turned my attention to my subtheme where my customizations get stored in a git repo so I need not reproduce these changes on every rebuild. I still have not sorted out how to make my customizations over-ride the base theme, and have resorted to copying them into the base theme on each upgrade, but hope soon enough to get a better handle of a more graceful means of getting this work done.

This work is done at this path:

~/sites/my_client/web/themes/contrib/drupal8_parallax_theme_my_client

Support for youtube was easy:

In the file: drupal8_parallax_theme_my_client.theme, I added this line: $variables['youtube_url'] = theme_get_setting('youtube_url');

And then add this stanza, adapted from the base theme, to be copied into tthe corresponding file in the base theme as part of the drupal8_parallax_theme_form_system_theme_settings_alter() function:

    $form['drupal8_parallax_theme_settings']['social_icon']['youtube_url'] = array(
        '#type' => 'textfield',
        '#title' => t('YouTube URL'),
        '#default_value' => theme_get_setting('youtube_url'),
    );

This should expose a configuration option at: admin/appearance/settings/drupal8_parallax_theme_my_client.

In the templates/layout/page.html.twig file, immediately after the facebook stanza.

    {% if youtube_url %}
        <a href="{{ youtube_url }}"  class="youtube" target="_blank" ><i class="fa fa-youtube"></i></a>
    {% endif %}

This should reveal the configured icon in the social media block exposed in the footer.

Next drush cr, configure the url in the user interface at the path mentioned above, and another drush cr, should expose the changes to an anonymous user.

This works because youtube's icon is already supported in the default version of fontAwesome packaged with the theme. Additional icons are apparently being added to the fontAwsome package on the regular. But waiting on he fa team's release cycle was a non-starter for a client who needs that functionality now. Upgrading the fa package at the moment apparently incurs a license fee plus the overhead of sorting out how to automate the upgrade into my build process.

So I put in a call to Adam Muehlhausen, in Indiana, with whom I was collaborating on the front-end demands for the site-under-development. I was hoping for a phone conversation with him to inform me on integrating these changes into the version-controlled sub-theme, to extend the ./includes/fontawesome/css/font-awesome.css file included as a part of the base theme. What I got instead was an email asking me to inspect the results of his work.

We had already been making use of a module permitting one to store css and js in the database configuration, to be integrated on page build as needed. ( composer require 'drupal/asset_injector:^2.10' ). Without access to the backend, Adam proceeded to use his existing gui access, the firebug/ inspect-element tool in his browser and an hour or so of experimentation to add this to the .css, supported by icons he harvested from each site and uploaded into a published, but unlinked node created for this purpose.

/* social icons not in font-awesome */
.footer-menu .fa-gettr {
  background: url('/sites/default/files/inline-images/gettr.png') center no-repeat;
}

.footer-menu .fa-gettr {
  background-size: contain;
  width: 12px;
  height: 12px;
  vertical-align: middle;  
}

.footer-menu .gettr:hover{
  -webkit-filter: invert(100%) grayscale(100%) brightness(50%) sepia(60%) hue-rotate(250deg) saturate(700%);
  -moz-filter: invert(100%) grayscale(100%) brightness(50%) sepia(60%) hue-rotate(250deg) saturate(700%);
  filter: invert(100%) grayscale(100%) brightness(50%) sepia(60%) hue-rotate(250deg) saturate(700%);  
}

By replicating this, we were able to expose linked icons for a total of eight social media platforms, three supported by the default theme, another not, but nonetheless supported by the fontAwesome project aand another four so new as to be supported by neither.