How to create icons for the forums

[Joe]

1. Search for an icon to start with from here: https://iconify.design/icon-sets/

2. Open the Figma editor. To do that go to https://figma.com/ where you need to register or login with your Google account.

3. Create new document: In top left corner of editor click the three lines representing a menu and create new file. Then click on "Untitled" on top of document to change its name.

4. Create artboard by pressing "a" to select artboard tool, on right side you'll see list of different devices. Click any option there, doesn't matter which one.

5. Back in iconify, click on the "SVG" tab to get raw SVG, click in second text area to copy SVG to clipboard.



6. Then switch back to Figma. Press Ctrl+V or Option+V to paste icon. If you can't see it, change the W and H settings on the right to 300 each. You should then be able to see your icon and move it around. Center it in your artboard.



7. Click chain icon on right of the height value to keep width/height ratio (see above).

 

[Joe]

8. Switch the Fill colors (67B0DD & BCBEC0).



Add a Text object, type in some text, set the font (Taprom) & size (96), place in back bubble.



Right click on the grey Vector bubble on the left menu and Bring to Front:

 

[Joe]

Drop a rectangle onto the front bubble:



Highlight and copy File URL:



In Figma, go to File/Place Image:



Paste into FileName box and click open. Mouse becomes the icon which you move to rectangle and click to drop.

 

[Joe]

To copy icon select artboard "Icon" on left side, click on "Icon" (artboard title) in editor and drag it while holding "alt". It will duplicate artboard. Then rename it to something like "Unread Icon" and set the Fill for everything at 50%. This will be used for Forums with nothing to read.

 

[Joe]

After you've made icons, export them. To export icons select artboard, on bottom right in export section select "SVG" format and click "Export" button:

 

[Joe]

Code segment replaced:

i
{
display: block;
line-height: 1.125;
font-size: 32px;

&:before
{
.m-faBase();

color: @xf-nodeIconReadColor;

.node--unread &
{
opacity: 1;
color: @xf-nodeIconUnreadColor;
}
}

.node--forum &:before,
.node--category &:before
{
.m-faContent(@fa-var-comments);
}

.node--page &:before
{
.m-faContent(@fa-var-file-alt);
}

.node--link &:before
{
.m-faContent(@fa-var-link);
}
}