Add new entries to the "Social Links" Dashboard page

First of all search for the desired Awesome icon here. In this example search for "stackexchange".

2. Click on the icon in the result list.

3. The HTML-code for the icon appears: ... class="fa fa-stack-exchange"....

4. Copy just the stack-exchangepart without the fa fa-. Concrete CMS is taking care of it.

5. In your project, create the file /application/config/concrete.php.

6. Add to this file the following code:

<?php
return [
    'social' => [
        'additional_services' => [
            [
                'stackexchange', // the handle
                'StackExchange', // the title which will be shown in the dropdown
                'stack-exchange', // the icon name copied before
            ]
        ],
    ],
];

If you have previously added manual configuration items to this file you will need to add this new section as an additional array item.

That's it. Upload the file, empty site cache and you'll have a new entry in the Social Link Service Dropdown. Note that the Awesome icon needs to exist.

Updated Date: 02/16/2023 by community member way2sharp4u

--- ALTERNATIVE OPTION (If there is no FontAwesome icon and you need to use your own) ---

If you need to add a Social Link that does not have a Font-Awesome icon you can do the following:

This has been confirmed to work on Concrete CMS 9.1.3 with PHP 8.1.15.

For this I needed x3 PNG Transparent Images (sized the same). A BLANK IMAGE, MAIN-IMAGE and a HOVER-IMAGE. I used the Direct URL links for the PHP and the Custom CSS (Override). Note: For the PHP I was able to remove the 'https://yoursite/' from the URL path, but had to use the full URL path for the Custom CSS.

1. In your project, create the file /application/config/concrete.php if it doesn't already exist.

2. Add the following code to this file (Note:I modifed the above instructions and used the following code (Replace with your URL):

<?php
return [
    'social' => [
        'additional_services' => [
            [
                'rumble',        // the handle
                'Rumble',        // the title
                'temp-rumble',   // the icon (rumble doesn't exist yet)
                '<span class="temp-rumble"><img src="<DirectURL-RumblePNG-BLANK>" style="position:relative; top:-7px; left:0px; height:27px; border:none;" /></span>',
            ]
        ],
    ],
];

Note: If you have previously added manual configuration items to this file you will need to add the above new section as an additional array item.

3. Go to Dashboard > Pages & Themes > Themes. Then, from the dropdown on your theme select 'Customize'.

4. Click the Pencil Icon (aka Edit). Select your Current Template.

5. Scroll to the bottom then toggle 'Custom CSS', then click 'Edit CSS'

6. Add the following code into the pop-up.

.temp-rumble {
  visibility: hidden;
}
.temp-rumble img {
  background-image: url("<DirectURL-RumblePNG-MAIN>");
  visibility: visible;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 27px;
  width: 25px;
  padding: 0px;
  margin: 0px;
}
.temp-rumble:hover img {
  background-image: url("<DirectURL-RumblePNG-HOVER>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 27px;
  width: 25px;
  padding: 0px;
  margin: 0px;
}

7. Close the pop-up, then click 'Save Changes'

8. That's it. Empty site cache (Clear Cache) and you'll have a new entry in the Social Link Service Dropdown along with a custom icon.

I hope this edit helps others. Thank you to the original posters of this solution, it was extremely helpful.