• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials Dashicons, Themes

Add Dashicons to Show File Type for Download Links

May 19, 2015 Updated on November 29, 2020 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail
dashicons for file types on download links

You may have different kinds of files or file types for your website visitors to download, such as Microsoft Word or Excel documents, or Google Docs or Sheets, PDFs or e-books, or even audio or video files.

This WordPress tutorial shows how you can use dashicons to provide your visitors with a visual indication of the file type of the download link, so they don’t start downloading a file type that they prefer to use on another device, for instance on their laptop, rather than on their phone.

Some other tutorials using dashicons:

  • Add Dashicons to Your WordPress Post
  • Use WordPress Dashicons to Add Font Icons to Your Genesis Theme

Use Dashicons

Dashicons are easy to use to identify the download file type because they are already part of the WordPress Admin.

First, you will need to enqueue the dashicons to use on the front side of your website.

Open your child theme functions.php in a text editor, and add the following.

<?php // Remove this line before adding to functions.php

// Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
function custom_enqueue_scripts() {

	wp_enqueue_style( 'dashicons' );

}

If your theme already has an wp_enqueue_scripts function, you can just add to it instead. For instance, in the Genesis Sample theme, you can add it to the Enqueue Google Fonts section to look like this.

<?php
// Remove line above

// Enqueue Google Fonts
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {

	// Enqueue Google Fonts
	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,400,700', array(), CHILD_THEME_VERSION );

	// Enqueue Dashicons
	wp_enqueue_style( 'dashicons' );

}

Choose Your Icons

Choose your dashicons from this page; especially look at those in the Media section. Depending on the file types you’ll have for your visitors to download, you can choose the icons you like. Here are some to try.

  • document – \f497
  • spreadsheet – \f495
  • e-book – \f330 or \f331
  • audio – \f500
  • video – \f490

Add Icons to Style Sheet

Next identify the file extension for your file type – .doc, .docx, .xls, .xlsx, .mp3, .mov, .mp4, .pdf, .mobi, .epub.

You will use a line with the extension you require, like this:
a[href $='.docx']:before
This line adds the icon before any link that ends with .docx

You can add the CSS below to Appearance > Customize > Additional CSS.

Documents

/* Documents */
a[href $='.doc']:before,
a[href $='.docx']:before { 
	-webkit-font-smoothing: antialiased;
	color: #046ca3;
	content: "\f497";
	display: inline-block;
	font: normal 24px/1 'dashicons';
	margin-right: 5px;
	position: relative;
		top: 2px;
	vertical-align: top;
}
Explanation of the CSS
  • color: – use any color you like for your icons
  • content: "\f497"; – this identifies the icon
  •  display: inline-block; – keeps the icon inline with the text
  • font: normal 24px/1 'dashicons'; – This is shorthand for font-family: dashicons; font-weight: normal; font-size: 24px; line-height: 1; You can try larger or smaller font-size.
  • margin-right: 5px; – to add space between the file name and icon
  • position: relative; top: 2px; and vertical-align: top; – help with alignment; adjust as needed.

Spreadsheet

/* Spreadsheet */
a[href $='.xls']:before,
a[href $='.xlsx']:before { 
	-webkit-font-smoothing: antialiased;
	color: #77a13b;
	content: "\f495";
	display: inline-block;
	font: normal 24px/1 'dashicons';
	margin-right: 5px;
	position: relative;
		top: 2px;
	vertical-align: top;
}

E-book

/* E-book */
a[href $='.pdf']:before,
a[href $='.mobi']:before,
a[href $='.epub']:before { 
	-webkit-font-smoothing: antialiased;
	color: #e5740c;
	content: "\f330";
	display: inline-block;
	font: normal 24px/1 'dashicons';
	margin-right: 5px;
	position: relative;
		top: 2px;
	vertical-align: top;
}

Audio

/* Audio */
a[href $='.mp3']:before { 
	-webkit-font-smoothing: antialiased;
	color: #c05ffe;
	content: "\f500";
	display: inline-block;
	font: normal 24px/1 'dashicons';
	margin-right: 5px;
	position: relative;
		top: 2px;
	vertical-align: top;
}

Video

/* Video */
a[href $='.mp4']:before,
a[href $='.mov']:before { 
	-webkit-font-smoothing: antialiased;
	color: #e74a41;
	content: "\f490";
	display: inline-block;
	font: normal 24px/1 'dashicons';
	margin-right: 5px;
	position: relative;
		top: 2px;
	vertical-align: top;
}

Will you add dashicons in your WordPress or Genesis theme to show the file type for your download links?

Share this post:

TwitterFacebookPinterestLinkedInEmail

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Brad says

    Didn’t see one for PDF?

    Reply
    • Marcy Diaz says

      Hi, Brad. Thanks for stopping by.
      There isn’t a specific pdf icon. Since most pdfs today are ebooks, that’s the icon I used in the tutorial.
      Others that you could use are:
      “dashicons-media-default” – “\f498”
      “dashicons-media-text” – “\f491”

      Reply
      • Brad says

        No worries. I added a note to Mel on Trac so he may add one at some stage. Seems like a good idea. Nice tut!

        Reply
        • Marcy Diaz says

          Thanks, Brad!
          Great that you added a note to Mel; I would never have thought of that. Thanks!

          Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!