No products in the cart.
05
Jun
Jun
Have you ever seen websites that show file icons next to the download links?
Recently, one of our readers asked if it was possible to display attachment file icons in WordPress. You can easily show different icons so that users know which type of file they are downloading.
In this article, we will show you how to add attachment file icons in WordPress.
When You Need Attachment File Icons in WordPress
By default, WordPress allows you to upload images, audio, video, and other documents. You can also enable additional file types to be uploaded in WordPress.
When you upload a file through the media uploader and add it to a post or page, WordPress will try to embed the file as if it is an image, audio, video, or in a supported file format.
For all other files, it will just add a file name as plain text and link it to the download or attachment page.
In the above screenshot, we have added a PDF and a Docx file. However, it is difficult for a user to guess which type of file they would be downloading.
If you regularly upload different file types, you may want to display an icon next to the link. This way, your users can easily identify the file type they are looking for.
Having said that, let’s see how to add attachment file icons in WordPress for different file types.
Method 1: Add Attachment File Icons in WordPress Using a Plugin
The easiest way to add file type icons is by using a WordPress plugin like MimeTypes Link Icons. This free plugin is very easy to use and lets you add icons for different file types.
The first thing you need to do is install and activate the MimeTypes Link Icons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, visit the Settings » MimeType Icons page to configure the plugin settings.
The plugin allows you to choose the icon size, as well as between PNG and GIF icons. Next, you need to choose the icon alignment and specify which file types will display the icon.
After that, you can scroll down and select the icons to display on your website. For instance, there are icons for file types like PDF, PPT, CSV, AVI, RPM, TXT, and more.
Next, navigate to the Advanced Settings section. In this area, you’ll discover an option labeled Show file size next to the download link. By default, this feature is disabled due to its potential to be resource-intensive.
After making your adjustments, be sure to click the Save Changes button to secure your settings.
Next, you can edit a post or page and insert a file download link using the media uploader. Preview your post, and you’ll notice the file icon displayed next to the download link.
Method 2: Using Icon Fonts for Attachment Files in WordPress
In this approach, we will utilize an icon font to display an icon beside the attachment file link.
First, install and activate the Font Awesome plugin. If you require assistance, refer to our guide on how to install a WordPress plugin.
Once activated, navigate to the Settings » Font Awesome page in your WordPress dashboard. Here, you can adjust the general settings for the plugin, such as selecting between pro or free icons.
Next, edit the post or page where you wish to add an attachment link.
Within the content editor, insert the HTML code for the icon you want to display.
To obtain the HTML code, visit the Font Awesome icon library website. Use the search bar to find an icon, then click on the desired image to get the code.
You will then see various versions of the icon along with their HTML code.
Click on the desired code to copy it.
Afterward, return to your website’s WordPress content editor and click the + sign to add a Custom HTML block.
Paste the icon’s code into this block.
When finished, click Publish or Update your page.
Now, visit your website to view the newly added icon next to the attachment file type.
Bonus: Sell Digital Files to Make Money Online
Now that you’ve mastered adding attachment file type icons, you can elevate your website by selling various files as digital downloads. This method not only helps you generate online income but also encourages users to sign up for your newsletter in exchange for a free resource.
To sell digital products effectively, use Easy Digital Downloads. This platform is one of the top eCommerce solutions for WordPress, known for its simplicity and ease of setup.
Easy Digital Downloads seamlessly integrates with popular payment services such as PayPal and Stripe.
Additionally, you can effortlessly upload digital files that you want to sell and start earning money online.
The plugin allows you to add details such as a title and description, set the download price, choose a download image, and more.
For more information, please check out our guide on how to sell digital downloads in WordPress.
We hope this article has helped you learn how to add attachment file icons in WordPress. You may also want to explore our guides on how to embed PDFs, spreadsheets, and other files in WordPress blog posts, as well as the best WordPress plugins for small businesses.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also follow us on Twitter and Facebook.
Conclusion: How to Add Attachment File Type Icons in WordPress
Adding attachment file type icons in WordPress improves both the visual appeal and usability of your site by helping users quickly recognize file types. By using the right plugins and following the steps in this guide, you can easily implement custom icons for various file attachments.
We hope this guide has been beneficial in enhancing your WordPress site. For more related information, explore our guides on how to sell digital downloads in WordPress and how to embed PDFs, spreadsheets, and other files in WordPress blog posts. Also, check out the best WordPress plugins for small businesses to further optimize your site.
If you found this article helpful, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
