Skip to content

How can I add additional social media?

Jump to bottom
rjzupkoii edited this page Apr 14, 2024 · 3 revisions

Academic Pages tries to include a comprehensive list of the popular forms of collaboration and social media, but with more being added all of the time it can be hard to keep up! So there is a form of social media that you think should be included your first stop should be to open a New Issue; however, with a little bit of coding you can also add one to your page as well.

First you should check to see if the appropriate icon is included as part of Font Awesome (version 6.5.2 free) or Academicons (version 1.9.4), and if not it is possible to to request the icon be created by the the maintainers of the fonts, but it make take some time for them to be added. Likewise, if the icon is available in a newer version of the fonts that what the template currently supports, it is recommended that you create a New Issue so that the fonts shipped with the template can be updated.

Since a user has requested Zhihu be added, we will use that in this example (see Issue #1153. First, check to see if a social media icon is included as part of Font Awesome by performing a search and in this case we can see that one is present. Click on the icon and a pop-up with a code snippet. Make of the CSS class - in this case of Zhihu we get:

<i class="fa-brands fa-zhihu"></i>

The important part to make a note of is in the class attribute which tells us that this icon is part of the fa-brands font and can be referenced via fa-zhihu.

Next open website repository in your preferred development environment and open the _config.yml in the root of the project. You may already be familiar with the author tag which includes basic biographic information as well as various social media sites. As a matter of convention for the template these are grouped by type (i.e., basic information, academic sites, etc.) and then sorted alphabetically.

Add a new entry for social media under this tag:

author:

  # Preceding entries skipped

  wikipedia        : # Username
  xing             : # Username
  youtube          : # Username
  zhihu            : https://www.zhihu.com/

Next, open _includes/author-profile.html – this file follows a similar organization for social media links as _config.yml – and add the following lines at an appropriate place in the list:

{% if author.zhihu %}
  <li><a href="{{ author.zhihu }}"><i class="fab fa-fw fa-zhihu" aria-hidden="true"></i> Zhihu</a></li>
{% endif %}

Note that following author. will be the new tag that you added and the fa-zhihu class form Font Awesome has been added while fab is an abbreviated version of fa-brands.

Test to make sure things are working by running the website locally and if the name and icon appears then the change has been successfully added. Commit your changes and push to GitHub to deploy the new social media link.

Clone this wiki locally