Usage
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.
Examples
Adding icons for more file types
@include file_icon(doc docx, f1c2, #2b5797);
Automatically detecting an extension for an icon inside of the entry content
<a href="something.pdf">Download</a>
Using an icon that requires the specific class or outside of the content editor
<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)
<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
No Parameters
These will only appear to links within the WordPress entry content area.
MS Word DocumentMS Excel Document
PDF Document
MS Powerpoint Document
Archive
Text Document
HTML Document
PHP Document
CSS Document
JS Document
SWF Document
With explicit "icon" class
These can be used anywhere on the page.
MS Word DocumentMS 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)
"no-icon" Classes
MS Word DocumentMS Excel Document
PDF Document
MS Powerpoint Document
Archive
Text Document
Icon Prevention
PDF Button
Note: To add an icon to the button, use the standard Font Awesome syntax inside of the tag.
Additional Notes
Note that automatic icons are only applied to links within the entry content area. However, the .icon class will allow them to appear anywhere on the page.
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 249.
@mixin file_icon($filetypes, $unicode: "\f016", $color: #292b2c, $specific: false){
@each $filetype in $filetypes {
@if $specific { //Some file extensions must explicitly request an icon. These can be called anywhere on the page.
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 { //Otherwise, it only automatically adds icons to links within the entry content area.
.entry-content {
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;}
}
}
}
}
}
Override
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.
}