Skip to Content


Prepend file links with an associated icon.

Sass February 22, 2017


file_icon($filetypes, $unicode, $color, $specific)


(Required) (Map) What file extensions to associate with this icon
Default: None

(Optional) (String) The unicode icon (un-escaped)
Default: f016

(Optional) (String) The color of the icon
Default: $text_color

(Optional) (Boolean) If the class "icon" must be used
Default: false

Parameter Notes

$specific is for common file extensions that would inevitably be applied when undesired (like .html or .php). By passing “true” to this parameter, the element must have the class “icon” for it to appear.

Request or provide clarification »


Adding icons for more file types

@include file_icon(doc docx, f1c2, #2b5797);

Automatically detecting an extension for an icon

<a href="something.pdf">Download</a>

Using an icon that requires the specific class

<a class="icon" href="something.html">Download</a>

Hiding an automatic icon

<a class="no-icon" href="something.ppt">Download</a>

Using white colors (for colored backgrounds)

<a class="white" href="something.doc">Download</a>

Using the class on a list item (useful for WordPress menu items)

    <li class="icon">
        <a href="something.js">Download</a>
    <li class="no-icon">
        <a href="something.php">Download</a>
    <li class="icon white">
        <a href="">Download</a>


With explicit "icon" class

MS Word Document
MS Excel Document
PDF Document
MS Powerpoint Document
Text Document
HTML Document (Only available with declared icon)
PHP Document (Only available with declared icon)
CSS Document (Only available with declared icon)
JS Document (Only available with declared icon)
SWF Document (Only available with declared icon)

Icon Prevention

PDF Button

Note: To add an icon to the button, use the standard Font Awesome syntax inside of the tag.

Additional Notes

Icons are not applied to buttons.

Default file icons:

  • doc, docx
  • xls, xlsx
  • ppt, pptx
  • pdf, pdfx
  • zip, zipx, rar, gz, tar
  • txt, rtf
  • html (specific)
  • php (specific)
  • js (specific)
  • css, scss (specific)
  • swf (specific)

The no-icon class can appear on any parent element to disable icons for everything inside.

Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/scss/partials/_helpers.scss on line 243.

    @mixin file_icon($filetypes, $unicode: "\f016", $color: #292b2c, $specific: false){
        @each $filetype in $filetypes {
            .entry-content {
                @if $specific { //Some file extensions must explicitly request an icon
                    a.icon[href$=".#{$filetype}" i] {text-decoration: none; border-bottom: 1px dotted $color;
                        &:before {content: "#{$unicode}"; @include font-awesome("solid"); color: $color; margin-right: 7px; font-weight: 300;}
                } @else {
                    a[href$=".#{$filetype}" i]:not(.no-icon):not(.btn):not(.wp-block-button__link),
                    li.icon a[href$=".#{$filetype}" i] {text-decoration: none; border-bottom: 1px dotted $color;
                        &:before {content: "#{$unicode}"; @include font-awesome("solid"); color: $color; margin-right: 7px; font-weight: 300;}


    To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

    @mixin file_icon($filetypes, $unicode, $color, $specific){
        //Write your own code here, leave it blank, or return false.