Add a file type icon for attachments in the rich text editor

[wanghm365]

System: Windows11 22H2 x64
Joplin version: 2.2.15

I am not a programmer, usually I use the rich text editor, and I do not use the markdown editor. But I found that the attachment only displays a file name in the rich text editor, so I tried to modify usersytle.css to add an icon.

By searching, I achieved the following method of adding icons in front of attachments.

1. Download the Font Awesome font, extract it, locate 'fontawesome-webfont.ttf' in the fonts directory, and install it into c:\Windows\fonts directory.

2. In userstyle.css, add an icon by selecting CSS -: before:

/Modify hyperlink font color and add underline/
A{
Color: # 55aaff;
Font weight: normal;
Padding: 0 2px;
Text decoration: none;
Border bottom: 1px solid # 55aaff;
}

/Find the link containing the PDF file and add an icon in front of it/
A [href $=". pdf"]: before
{
Content: " f1c1";
Font family: FontAwesome;
Font weight: normal;
Font style: normal;
Margin right: 5px
}

/Adding icons to Mircosoft Word/
A [href $=". docx"]: before, a [href $=". doc"]: before
{
Content: " f1c2";
Font family: FontAwesome;
Font weight: normal;
Font style: normal;
Margin right: 5px
}

If there is a simpler method, please reply and let me know. Thank you!