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

**URL:** <https://discourse.joplinapp.org/t/add-a-file-type-icon-for-attachments-in-the-rich-text-editor/32619>\
**Category:** Support\
**Created:** [9 September 2023 14:13 UTC](https://discourse.joplinapp.org/t/add-a-file-type-icon-for-attachments-in-the-rich-text-editor/32619 "2023-09-09T14:13:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![wanghm365](https://avatars.discourse-cdn.com/v4/letter/w/d9b06d/32.png) [@wanghm365](https://discourse.joplinapp.org/u/wanghm365)\
**Post date:** [9 September 2023 14:13 UTC](https://discourse.joplinapp.org/t/add-a-file-type-icon-for-attachments-in-the-rich-text-editor/32619/1 "2023-09-09T14:13:54Z")

</div>

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  
}

![屏幕截图 2023-09-09 220653](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/6/a/6a3105fbf039895541e9bd22bd6b861ee2462c69.png)

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [9 October 2023 14:14 UTC](https://discourse.joplinapp.org/t/add-a-file-type-icon-for-attachments-in-the-rich-text-editor/32619/2 "2023-10-09T14:14:09Z")

</div>

Closed on 9 October 2023 14:14 UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.