How to create icons for the forums

Joe

Administrator
Staff member
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.

1583375564061.png

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.

1583375703722.png

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

Joe

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

1583376135200.png

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

1583377412944.png

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

1583377278900.png
 
Last edited:

Joe

Administrator
Staff member
Drop a rectangle onto the front bubble:

1583377549881.png

Highlight and copy File URL:

1583377675493.png

In Figma, go to File/Place Image:

1583377793415.png

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

1583377977487.png
 

Joe

Administrator
Staff member
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.

1583378737903.png
 
Last edited:

Joe

Administrator
Staff member
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

Administrator
Staff member
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);
}
}
 
Top