Using Font Awsome icons in a file list

In a recent WordPress project, the client needed the ability to display a list of downloads on certain pages.

The site was already using the aptly named Font Awesome, which has an icon for every occasion including many for file types, so I thought why not use an icon as a nice visual aid in the list of files.

This PHP function retrieves either the Font Awesome icon class or character code based on a mime-type by looking it up in a multi-dimensional array. If it can’t find the mime-type, it falls back on a generic file icon.

function getFontawesomeFileIcon( $mime_type, $class = true )
{
	$data = array(

		'default' => array('fa-file', 'f15b'),
		'application/x-7z-compressed' => array('fa-file-archive-o', 'f1c6'),
		'application/x-bzip' => array('fa-file-archive-o', 'f1c6'),
		'application/x-bzip2' => array('fa-file-archive-o', 'f1c6'),
		'application/x-rar-compressed' => array('fa-file-archive-o', 'f1c6'),
		'application/x-tar' => array('fa-file-archive-o', 'f1c6'),

		'audio/x-wav' => array('fa-file-audio-o', 'f1c7'),
		'audio/x-aac' => array('fa-file-audio-o', 'f1c7'),
		'audio/x-aiff' => array('fa-file-audio-o', 'f1c7'),
		'audio/x-ms-wma' => array('fa-file-audio-o', 'f1c7'),
		'audio/mpeg' => array('fa-file-audio-o', 'f1c7'),
		'audio/mp4' => array('fa-file-audio-o', 'f1c7'),
		'audio/ogg' => array('fa-file-audio-o', 'f1c7'),
		'audio/webm' => array('fa-file-audio-o', 'f1c7'),
		'audio/x-wav' => array('fa-file-audio-o', 'f1c7'),

		'text/css' => array('fa-file-code-o', 'f1c9'),
		'text/x-java-source,java' => array('fa-file-code-o', 'f1c9'),
		'application/javascript' => array('fa-file-code-o', 'f1c9'),
		'application/json' => array('fa-file-code-o', 'f1c9'),
		'text/x-pascal' => array('fa-file-code-o', 'f1c9'),

		'application/vnd.ms-excel' => array('fa-file-excel-o', 'f1c3'),
		'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' => array('fa-file-excel-o', 'f1c3'),
		'text/csv' => array('fa-file-excel-o', 'f1c3'),

		'image/png' => array('fa-file-image-o', 'f1c5'),
		'image/svg+xml' => array('fa-file-image-o', 'f1c5'),
		'image/tiff' => array('fa-file-image-o', 'f1c5'),
		'image/bmp' => array('fa-file-image-o', 'f1c5'),
		'image/vnd.dwg' => array('fa-file-image-o', 'f1c5'),
		'image/gif' => array('fa-file-image-o', 'f1c5'),
		'image/jpeg' => array('fa-file-image-o', 'f1c5'),
		'image/vnd.adobe.photoshop' => array('fa-file-image-o', 'f1c5'),
		'image/x-pict' => array('fa-file-image-o', 'f1c5'),

		'video/quicktime' => array('fa-file-movie-o', 'f1c8'),
		'video/x-msvideo' => array('fa-file-movie-o', 'f1c8'),
		'video/x-flv' => array('fa-file-movie-o', 'f1c8'),
		'video/x-ms-asf' => array('fa-file-movie-o', 'f1c8'),
		'video/x-ms-wmv' => array('fa-file-movie-o', 'f1c8'),
		'video/mpeg' => array('fa-file-movie-o', 'f1c8'),
		'video/mp4' => array('fa-file-movie-o', 'f1c8'),
		'video/ogg' => array('fa-file-movie-o', 'f1c8'),
		'video/webm' => array('fa-file-movie-o', 'f1c8'),
		'video/x-matroska' => array('fa-file-movie-o', 'f1c8'),

		'application/pdf' => array('fa-file-pdf-o', 'f1c1'),

		'application/vnd.ms-powerpoint' => array('fa-file-powerpoint-o', 'f1c4'),
		'application/vnd.openxmlformats-officedocument.presentationml.presentation' => array('fa-file-powerpoint-o', 'f1c4'),

		'application/msword' => array('fa-file-word-o', 'f1c2'),
		'application/vnd.openxmlformats-officedocument.wordprocessingml.document' => array('fa-file-word-o', 'f1c2'),

		'application/zip' => array('fa-file-zip-o', 'f1c6'),
	);

	if( !array_key_exists( $mime_type, $data) )
	{
		$mime_type = 'default';
	}

	if( $class )
	{
		return $data[$mime_type][0];
	}

	return $data[$mime_type][1];

}

2 Replies to “Using Font Awsome icons in a file list”

Leave a Reply

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