Skip to Content

file_icon()

Prepend file links with an associated icon.

Sass February 22, 2017

Usage

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

Parameters

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

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

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

$specific
(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 »

Examples

Adding icons for more file types

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

Automatically detecting an extension for an icon

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

Using an icon that requires the specific class

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

Hiding an automatic icon

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

Using white colors (for colored backgrounds)

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

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

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

Demo


With explicit "icon" class

MS Word Document
MS Excel Document
PDF Document
MS Powerpoint Document
Archive
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.

Source File

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

Sass
@mixin file_icon($filetypes, $unicode: "\f016", $color: #292b2c, $specific: false){
    @each $filetype in $filetypes {
        @if $specific {
            a.icon[href$=".#{$filetype}"] {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}"]:not(.no-icon):not(.btn):not(.wp-block-button__link),
            li.icon a[href$=".#{$filetype}"] {text-decoration: none; border-bottom: 1px dotted $color;
                &:before {content: "#{$unicode}"; @include font-awesome("solid"); color: $color; margin-right: 7px; font-weight: 300;}
            }
        }
    }
}

Override

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

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