Skip to content

Adding a new font icon to fontawesome etherpad

Sebastian Castro edited this page Apr 6, 2020 · 3 revisions

Etherpad comes with a lot of icons on the fontawesome-etherpad font, but in case you need one that is not there yet, follow these steps:

  • Go to Fontello;
  • Import the existing src/static/font/config.json into Fontello (here's a how-to for this step). This will automatically select some icons on the screen: Screen shot
  • Click on "Download webfont";
  • Unzip the downloaded file;
  • On the resulting unzipped folder, copy the config.json and the four files font/fontawesome-etherpad.* into src/static/font/;
  • in unzipped folder, open css/fontawesome-etherpad.css, and copy the list of icons rules like
.buttonicon-sync-alt:before { content: '\e800'; }
.buttonicon-print:before { content: '\e801'; }
...

Into src/static/css/pad/icons.css (replacing old similar css rules)

  • That's it! Your code is ready for a pull request, and your icon is available for you to use. Here's an example of pull request that added an icon

Using an icon from fontawesome-etherpad

Now that your icon is available, here's how to use it:

  • Get icon's code from config.json;
  • Use this converter to find it's HEX value;
  • Place the HEX value on the CSS.

General

Resources

For Developers

How to's

Set up

Advanced steps

Integrating Etherpad in your web app

for Developers

Clone this wiki locally