File Type Icons

File Type Icons

ToolDocs™ automatically displays an icon next to each document link based on the file type — PDF, Word, Excel, ZIP, external links, and a default icon for other types. Icons appear in both the [td_file] and [td_category_files] shortcode output.

Default Icon Library

By default, ToolDocs™ uses Font Awesome (free version via CDN) for all file type icons. The default icon mapping is:

• PDF → fa-regular fa-file-pdf
• Word (doc, docx, odt) → fa-regular fa-file-word
• Excel (xls, xlsx, ods) → fa-regular fa-file-excel
• Archives (zip, rar, 7z) → fa-regular fa-file-zipper
• External links → fa-regular fa-link
• All other types → fa-regular fa-file

Font Awesome Loading Options

Go to ToolDocs → Settings → Font Awesome to configure how the icon library is loaded:

• Enabled/Disabled — Toggle Font Awesome loading on or off. Disable this if your theme or another plugin already loads Font Awesome to avoid loading it twice.
• Free CDN — Loads the free version from the Font Awesome CDN. This is the default and works for most sites.
• Font Awesome Kit — If you have a Font Awesome Kit (free or Pro), enter your Kit ID to use it instead of the CDN version. This gives you access to Pro icons and custom icon sets if your Kit includes them.

Customizing Icons with Filters

You can modify or completely replace the default icons using two filter hooks — no need to edit plugin files.

Replace the Entire Icon Map

Use the tooldocs_file_icons filter to add new file types or override existing icons:

add_filter('tooldocs_file_icons', function($icons) {
    // Add icons for new file types
    $icons['ppt']  = '<i class="fa-regular fa-file-powerpoint"></i>';
    $icons['csv']  = '<i class="fa-regular fa-file-csv"></i>';
    $icons['mp4']  = '<i class="fa-regular fa-file-video"></i>';

    // Override an existing icon
    $icons['pdf'] = '<i class="fa-solid fa-file-pdf" style="color: #e74c3c;"></i>';

    return $icons;
});

Replace a Single File Type Icon

Use the tooldocs_file_icon filter to target a specific file type. This runs after the icon map lookup, so it can override individual icons without affecting the rest:

add_filter('tooldocs_file_icon', function($icon, $type) {
    if ($type === 'pdf') {
        return '<svg class="td-custom-icon" width="16" height="16">...</svg>';
    }
    return $icon;
}, 10, 2);

Using a Different Icon Library Entirely

If you prefer a different icon library (like Heroicons, Phosphor, or custom SVGs), disable Font Awesome in settings and use the tooldocs_file_icons filter to return your own markup for each file type. The filter accepts any valid HTML, so you’re not limited to <i> tags.

Icon Color

The color of shortcode file icons can be customized in ToolDocs → Settings → Colors via the Shortcode Icon color setting. This sets the --td-shortcode-icon CSS variable applied to all file type icons.