Mkdocs-material: docker social icon

[vsoch]

Hey @squidfunk ! Hopefully this is a simple issue to resolve! I am wanting to get the font awesome icon for Docker Hub (this one --> https://fontawesome.com/icons/docker?style%5C=brands&style=brands) to link to our Docker organization under social extra.

extra:
  social:
    - type: 'github'
      link: 'https://github.com/openbases'
    - type: 'docker'
      link: 'http://hub.docker.com/r/openbases'
    - type: 'twitter'
      link: 'https://twitter.com/vsoch'
    - type: 'linkedin'
      link: 'https://linkedin.com/in/vsochat'

It doesn't seem to render. I noticed that the font awesome icons also designate fa-docker fab so I added fab, and that didn't render either.

Is there a way to support the icon?

[squidfunk]

FontAwesome needs to be upgraded, see #756

[vsoch]

cool thanks @squidfunk - I'll keep an eye on that and use a workaround until then. Probably will just dig into the template and customize the svg myself :)

[vsoch]

I love this theme, by the way! It's really lovely, and easy to work with.

[squidfunk]

Thanks, glad to hear! Hope to find some time soon to address some open issues.

[vsoch]

Thanks @squidfunk! For all those interested, here is a quick workaround. First I created a directory on the same level as my site source (src) to put a custom theme, and created a "partials" subfolder, like this:

├── mkdocs.yml
├── src
└── theme
    ├── 404.html
    └── partials
        └── social.html

And in the mkdocs.yml I added the custom theme folder (and note that I installed mkdocs-material from pip!

theme: 
  name: material
  custom_dir: 'theme'

I'm showing the structure because I originally put "theme" under the "src" folder and well, that was wrong :P

I then added an image for the docker icon that I wanted under src/img. This location is pretty arbitrary.

├── favicon.ico
├── icon
│   ├── docker-clear.png
│   └── docker.png

Here he is! Yes, that's transparent, lol. He's there, trust me.

And then the partials file "social.html" just has an extra link to render it:

{% if config.extra.social %}
  <div class="md-footer-social">
    <link rel="stylesheet" href="{{ base_url }}/assets/fonts/font-awesome.css">
    {% for social in config.extra.social %}
      <a href="{{ social.link }}" target="_blank" class="md-footer-social__link fa fa-{{ social.type }}"></a>
    {% endfor %}
      <a href="http://hub.docker.com/r/openbases" class="md-footer-social__link fa" target="_blank">
        <img src="{{ base_url }}/img/icon/docker-clear.png" style="margin-left:10px" width="20px">
      </a>
  </div>
{% endif %}

And tada, happy whale boat :)