Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Font Awesome File Icons: Mapping MIME Types to correct icon classes
<?php
/**
* Get font awesome file icon class for specific MIME Type
* @see https://gist.github.com/guedressel/0daa170c0fde65ce5551
*
*/
function ($mime_type) {
// List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
$icon_classes = array(
// Media
'image' => 'fa-file-image-o',
'audio' => 'fa-file-audio-o',
'video' => 'fa-file-video-o',
// Documents
'application/pdf' => 'fa-file-pdf-o',
'application/msword' => 'fa-file-word-o',
'application/vnd.ms-word' => 'fa-file-word-o',
'application/vnd.oasis.opendocument.text' => 'fa-file-word-o',
'application/vnd.openxmlformats-officedocument.wordprocessingml' => 'fa-file-word-o',
'application/vnd.ms-excel' => 'fa-file-excel-o',
'application/vnd.openxmlformats-officedocument.spreadsheetml' => 'fa-file-excel-o',
'application/vnd.oasis.opendocument.spreadsheet' => 'fa-file-excel-o',
'application/vnd.ms-powerpoint' => 'fa-file-powerpoint-o',
'application/vnd.openxmlformats-officedocument.presentationml' => 'fa-file-powerpoint-o',
'application/vnd.oasis.opendocument.presentation' => 'fa-file-powerpoint-o',
'text/plain' => 'fa-file-text-o',
'text/html' => 'fa-file-code-o',
'application/json' => 'fa-file-code-o',
// Archives
'application/gzip' => 'fa-file-archive-o',
'application/zip' => 'fa-file-archive-o',
);
foreach ($icon_classes as $text => $icon) {
if (strpos($mime_type, $text) === 0) {
return $icon;
}
}
return 'fa-file-o';
}
@cdomigan

This comment has been minimized.

Copy link

cdomigan commented Jul 27, 2017

Thanks for this!

@reneweteling

This comment has been minimized.

Copy link

reneweteling commented Aug 2, 2017

Here is a ruby variant, thanks for the gist

module Admin
  module FileHelper

    def icon_for_mimetype mime 
      mimes = {
        'image': 'fa-file-image-o',
        'audio': 'fa-file-audio-o',
        'video': 'fa-file-video-o',
        # Documents
        'application/pdf': 'fa-file-pdf-o',
        'application/msword': 'fa-file-word-o',
        'application/vnd.ms-word': 'fa-file-word-o',
        'application/vnd.oasis.opendocument.text': 'fa-file-word-o',
        'application/vnd.openxmlformats-officedocument.wordprocessingml': 'fa-file-word-o',
        'application/vnd.ms-excel': 'fa-file-excel-o',
        'application/vnd.openxmlformats-officedocument.spreadsheetml': 'fa-file-excel-o',
        'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o',
        'application/vnd.ms-powerpoint': 'fa-file-powerpoint-o',
        'application/vnd.openxmlformats-officedocument.presentationml': 'fa-file-powerpoint-o',
        'application/vnd.oasis.opendocument.presentation': 'fa-file-powerpoint-o',
        'text/plain': 'fa-file-text-o',
        'text/html': 'fa-file-code-o',
        'application/json': 'fa-file-code-o',
        # Archives
        'application/gzip': 'fa-file-archive-o',
        'application/zip': 'fa-file-archive-o',
      }.with_indifferent_access

      if mime
        m = mimes[mime.split('/').first]
        m ||= mimes[mime]
      end

      m ||= 'fa-file-o'

      "fa #{m}"
    end

  end
end
@martinschilliger

This comment has been minimized.

Copy link

martinschilliger commented Jun 28, 2018

And here comes the Javascript-Version:

function getFontAwesomeIconFromMIME(mimeType) {
  // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
  var icon_classes = {
    // Media
    image: "fa-file-image-o",
    audio: "fa-file-audio-o",
    video: "fa-file-video-o",
    // Documents
    "application/pdf": "fa-file-pdf-o",
    "application/msword": "fa-file-word-o",
    "application/vnd.ms-word": "fa-file-word-o",
    "application/vnd.oasis.opendocument.text": "fa-file-word-o",
    "application/vnd.openxmlformats-officedocument.wordprocessingml":
      "fa-file-word-o",
    "application/vnd.ms-excel": "fa-file-excel-o",
    "application/vnd.openxmlformats-officedocument.spreadsheetml":
      "fa-file-excel-o",
    "application/vnd.oasis.opendocument.spreadsheet": "fa-file-excel-o",
    "application/vnd.ms-powerpoint": "fa-file-powerpoint-o",
    "application/vnd.openxmlformats-officedocument.presentationml":
      "fa-file-powerpoint-o",
    "application/vnd.oasis.opendocument.presentation": "fa-file-powerpoint-o",
    "text/plain": "fa-file-text-o",
    "text/html": "fa-file-code-o",
    "application/json": "fa-file-code-o",
    // Archives
    "application/gzip": "fa-file-archive-o",
    "application/zip": "fa-file-archive-o"
  };

  for (var key in icon_classes) {
    if (icon_classes.hasOwnProperty(key)) {
      if (mimeType.search(key) === 0) {
        // Found it
        return icon_classes[key];
      }
    } else {
      return "fa-file-o";
    }
  }
}

Thank you for the work done! 👍

@ckapatch

This comment has been minimized.

Copy link

ckapatch commented Sep 21, 2018

C# Version:

private string getFontAwesomeIconFromMIME(string mimeType)
{
	if (string.IsNullOrEmpty(mimeType)) return "";

	var iconMapping = new Dictionary<string, string>()
	{
		{"image", "fa-file-image-o"},
		{"audio", "fa-file-audio-o"},
		{"video", "fa-file-video-o"},
		{"application/pdf", "fa-file-pdf-o"},
		{"application/msword", "fa-file-word-o"},
		{"application/vnd.ms-word", "fa-file-word-o"},
		{"application/vnd.oasis.opendocument.text", "fa-file-word-o"},
		{"application/vnd.openxmlformats-officedocument.wordprocessingml","fa-file-word-o"},
		{"application/vnd.ms-excel", "fa-file-excel-o"},
		{"application/vnd.openxmlformats-officedocument.spreadsheetml","fa-file-excel-o"},
		{"application/vnd.oasis.opendocument.spreadsheet", "fa-file-excel-o"},
		{"application/vnd.ms-powerpoint", "fa-file-powerpoint-o"},
		{"application/vnd.openxmlformats-officedocument.presentationml","fa-file-powerpoint-o"},
		{"application/vnd.oasis.opendocument.presentation", "fa-file-powerpoint-o"},
		{"text/plain", "fa-file-text-o"},
		{"text/html", "fa-file-code-o"},
		{"application/json", "fa-file-code-o"},
		{"application/gzip", "fa-file-archive-o"},
		{"application/zip", "fa-file-archive-o"}
	};

	return iconMapping.ContainsKey(mimeType) ? iconMapping[mimeType] : "fa-file-o";
}
@kuba1999

This comment has been minimized.

Copy link

kuba1999 commented Oct 9, 2018

Font Awesome 5 classes

public function getIcon(MailBoxMessageAttachment $attachment)
{
    // List of official MIME Types: http://www.iana.org/assignments/media-types/media-types.xhtml
    $icon_classes = array(
        // Media
        'image' => 'far fa-image',
        'audio' => 'far fa-file-audio',
        'video' => 'far fa-file-video',
        // Documents
        'application/pdf' => 'far fa-file-pdf',
        'application/msword' => 'far fa-file-word',
        'application/vnd.ms-word' => 'far fa-file-word',
        'application/vnd.oasis.opendocument.text' => 'far fa-file-word',
        'application/vnd.openxmlformats-officedocument.wordprocessingml' => 'far fa-file-word',
        'application/vnd.ms-excel' => 'far fa-file-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml' => 'far fa-file-excel',
        'application/vnd.oasis.opendocument.spreadsheet' => 'far fa-file-excel',
        'application/vnd.ms-powerpoint' => 'far fa-file-powerpoint',
        'application/vnd.openxmlformats-officedocument.presentationml' => 'far fa-file-powerpoint',
        'application/vnd.oasis.opendocument.presentation' => 'far fa-file-powerpoint',
        'text/plain' => 'far fa-file-alt',
        'text/html' => 'far fa-file-code',
        'application/json' => 'far fa-file-code',
        // Archives
        'application/gzip' => 'far fa-file-archive',
        'application/zip' => 'far fa-file-archive',
    );

    foreach ($icon_classes as $text => $icon) {
        if (strpos(mime_content_type($this->mailboxAttachmentStorage->getAttachmentPath($attachment)), $text) === 0) {
            return $icon;
        }
    }
    return 'far fa-file';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.