Have you ever seen web sites that present file icons subsequent to the obtain hyperlinks? Not too long ago certainly one of our readers requested if it was doable to show attachment file icons in WordPress. Sure it's, and it’s fairly straightforward. On this article, we'll present you the way to add attachment file icons in WordPress.
When You Want Attachment File Icons in WordPress
By default, WordPress means that you can add pictures, audio, video, and different paperwork. You may as well allow additional file types to be uploaded in WordPress.
Whenever you add a file via the media uploader and add it to a submit or web page, WordPress will attempt to embed the file whether it is a picture, audio, video, or in a supported file format.
For all different recordsdata, it would simply add a file identify as plain textual content and hyperlink it to the obtain or attachment web page.
Within the above screenshot, now we have added a PDF and a Docx file. Nevertheless, it's troublesome for a consumer to guess which file they're downloading.
When you recurrently add totally different file sorts, then chances are you'll wish to show an icon subsequent to the hyperlink, so your customers can simply discover the file kind they’re searching for.
Having stated that, let’s see the way to add attachment file icons in WordPress for various file sorts.
Technique 1: Add Attachment File Icons in WordPress Utilizing Plugin
Very first thing you should do is set up and activate the MimeTypes Link Icons plugin. For extra particulars, see our step-by-step information on how to install a WordPress plugin.
Upon activation, you should go to Settings » MimeType Icons web page to configure plugin settings.
The plugin means that you can select icon measurement. You may as well select between png and gif icons. Subsequent, you should select the icon alignment and which file sorts will show the icon.
Underneath the superior choices, you may allow CSS lessons to cover icons. File obtain hyperlinks wrapped in these CSS lessons won't present the icons.
Under that you can see the choice to indicate file measurement subsequent to the obtain hyperlink. It's turned off by default, because it could possibly be useful resource intensive. Nevertheless in the event you like, you may allow it and in addition allow the choice to ‘Cache retrieved file sizes’.
Don’t overlook to click on on the Save Modifications button to retailer your settings.
Now you can edit a post or page and add an file obtain hyperlink utilizing media uploader. Preview your submit and you will note the file icon subsequent to the obtain hyperlink.
Technique 2: Utilizing Icon Fonts for Attachment Information in WordPress
On this methodology, we might be utilizing an icon font to show an icon subsequent to attachment file hyperlink.
Very first thing you should do is set up and activate the Better Font Awesome plugin.
Upon activation, you may edit a submit or web page the place wish to add an attachment hyperlink.
You'll discover the brand new ‘Insert Icon’ button on prime of submit editor. Clicking on it would show a popup the place you may search and choose the icon you wish to add.
Font Superior comes with tons of icons and has icons for essentially the most generally used file sorts. Click on on the icon you wish to add and the plugin will robotically add the required shortcode within the submit editor.
Now you may add your file and insert into submit utilizing media uploader.
You may as well add your personal custom CSS for a file icon by including your personal css class to the shortcode like this:
[icon name=”file-pdf-o” class=”” unprefixed_class=”pdf-icon”]
Now you can use .pdf-icon class to vary icon measurement, colour, and magnificence it to your personal wants.
We hope this text helped you discover ways to add attachment file icons in WordPress. You may additionally wish to see our information on the way to how to embed PDF, spreadsheet, and others in WordPress blog posts.
When you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Facebook.
