Custom (non Font Awesome) icons for contact.yml

[blaurascon]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I have a site that I would like to list on the sidebar via contact.yml, but it unfortunately does not have a logo on Font Awesome yet.

Is there a way to use a custom icon / SVG here with chirpy-starter?

Operations you have already tried

Tried putting a SVG path in the icon field out of curiosity, but it did not work (looking at the code this variable goes into, makes sense that it didn't work)

Anything else?

Thank you!

[lamininA1]

https://icomoon.io/app/#/select

This site will convert the SVG imgs to font. (even multiple SVGs can be converted.) After that, download it. (You can find the download button and covert button at the bottom of the site.)
There will be fonts folder and style.css. Transfer fonts folder to assets and style.css to assets/css.

You need to change _include/head.html file. There is line. You can put the code like this.

  <!-- Web Font -->
  <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

Also, You need to change style.css file too, to set the proper URL. ../ is all you need.

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?ptv5da');
  src: url('../fonts/icomoon.eot?ptv5da#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?ptv5da') format('truetype'),
    url('../fonts/icomoon.woff?ptv5da') format('woff'),
    url('../fonts/icomoon.svg?ptv5da#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Hope this works for you.

[blaurascon]

This worked with overall minimal fuss -- thank you!

[kungfux]

Whenever you define a contact in contact.yml, you specify the icon from font library. Consider an example:

- type: github
  icon: "fab fa-github"

In this case it is fa-github that is being used as a classname for a generated i element.

---

Knowing this, we can do the following:

• Make sure the icon does not exist yet https://fontawesome.com/icons
• Add your new contact in contact.yml

- type: telegram
  icon: telegram # unknown icon name just as an example
  url: https://t.me/kungfux

This generates the following HTML:

<a href="https://t.me/kungfux" aria-label="telegram" target="_blank" rel="noopener noreferrer">
    <i class="telegram"></i>
</a>

• Add the icon using CSS by adding the following into assets/css/jekyll-theme-chirpy.scss:

#sidebar i.telegram {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:url(%23SVGID_1_);%7D .st1%7Bfill:%23FFFFFF;%7D .st2%7Bfill:%23D2E4F0;%7D .st3%7Bfill:%23B5CFE4;%7D%0A%3C/style%3E%3Cg%3E%3ClinearGradient gradientUnits='userSpaceOnUse' id='SVGID_1_' x1='256' x2='256' y1='0' y2='510.1322'%3E%3Cstop offset='0' style='stop-color:%2341BCE7'/%3E%3Cstop offset='1' style='stop-color:%2322A6DC'/%3E%3C/linearGradient%3E%3Ccircle class='st0' cx='256' cy='256' r='256'/%3E%3Cg%3E%3Cpath class='st1' d='M380.6,147.3l-45.7,230.5c0,0-6.4,16-24,8.3l-105.5-80.9L167,286.7l-64.6-21.7c0,0-9.9-3.5-10.9-11.2 c-1-7.7,11.2-11.8,11.2-11.8l256.8-100.7C359.5,141.2,380.6,131.9,380.6,147.3z'/%3E%3Cpath class='st2' d='M197.2,375.2c0,0-3.1-0.3-6.9-12.4c-3.8-12.1-23.3-76.1-23.3-76.1l155.1-98.5c0,0,9-5.4,8.6,0 c0,0,1.6,1-3.2,5.4c-4.8,4.5-121.8,109.7-121.8,109.7'/%3E%3Cpath class='st3' d='M245.8,336.2l-41.7,38.1c0,0-3.3,2.5-6.8,0.9l8-70.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 1.75rem;
  height: 1.75rem;
}

[blaurascon]

I'm able to get most of my SVG's code working in the background-image section, but I'm not sure where to tell it to grab the same styling info that the other buttons are using (right now it's just solid black and the incorrect size; I want it to use the same colors and be the same size as the others). I'm trying to find where in the code the other buttons are assigned this, but not having any luck

Edit: I went with the other answer for now, but I'm very keen to see if we can get this one working too! More options are always good

[iSpeakNerd]

any update on this solution @kungfux @blaurascon? I'm following on a similar path with chirpy and wanting custom icons with custom social links