drawio-font-awesome
drawio-font-awesome copied to clipboard
webketje
A Draw.io/ diagrams.net (and desktop) library port of the free Font Awesome icons
Draw.io FontAwesome Library
The free icons of the FontAwesome icon set (normalized and) ready for usage with diagrams.net or draw.io Desktop. Base size of the icons is 16pt, ideal for working with a page grid of 8pt. Latest published version is FontAwesome 6.1.1.
Usage
Load on desktop
Download & unzip the latest release, open Draw.io desktop, and in the File menu, choose Open Library..., then select the unzipped library.
Screenshot
If you can see the files but they look "disabled", try to rename them with the .xml extension via File Explorer, then reopen the File menu.
Load online
Thanks to jsdelivr you can load this library without downloading anything directly! From the File menu, choose Open Library from, then URL and load the latest version: https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome.
Screenshot
Colors
The color can unfortunately not be changed through draw.io options. But you can load the entire library in a particular color, both from the release or online:
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - blue
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - brown
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - gray
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - green
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - navy
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - olive
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - orange
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - purple
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - red
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - teal
https://cdn.jsdelivr.net/gh/webketje/drawio-font-awesome@online/FontAwesome - white
Versions
You can load different font-awesome versions by replacing @online by @x.x.x. At the moment 6.1.1, 5.15.4, 5.14.0, 5.10.2 and 5.8.2 are available.
Change icon shade
You can change the icon shade (pale gray -> black ) after dragging it in your diagram by clicking it twice (not double-clicking). In the right sidebar, in the Style tab, uncollapse the Property/ Value listing, and play with the Fill opacity.
Building
cd Font-Awesome
git fetch
git checkout <tag>
cd ..
node build all
git checkout -f online
mv dist/* .
git add .
git commit -m "Update FontAwesome vx.x.x"
git tag -s x.x.x -m x.x.x
git push origin --tags online
Then checkout master, update docs and create a GH release pointing to x.x.x
webketje