TYPO3 filelinks icon missing

Question

In the CE filelinks with option set to "show fileicon" an icon ist shown but not specific to the content. It makes no difference if a .pdf or a .doc ist presented code for both is: .bootstrappackageicon-file::before { content: "\f105"; } link an image makes this: .bootstrappackageicon-file-image::before { content: "\f103"; }

how do i get a different icon for pdf an doc?

TYPO3 Vers. 11.x | bootstrap_package

Answer 1

In the bootstrap extension you can find templates for all CE types.
There is one file ext:bootstrap_package/Resources/Private/Templates/ContentElements/Uploads.html
In this file you can find the part with the file icons after line 23.

I have enhanced it (just copy the file to your site extension and add it's path to the *paths[1]) to this:

<f:if condition="{data.uploads_type} == 1">
    <span class="filelink-fileicon">
        <f:variable name="fileExt">{f:format.case(value: file.properties.extension, mode: 'lower')}</f:variable>
        <f:switch expression="{fileExt}">
            <f:case value="mp3"><span class="bootstrappackageicon bootstrappackageicon-file-audio"></span></f:case>
            <f:case value="mkv"><span class="bootstrappackageicon bootstrappackageicon-file-video"></span></f:case>
            <f:case value="avi"><span class="bootstrappackageicon bootstrappackageicon-file-video"></span></f:case>
            <f:case value="mov"><span class="bootstrappackageicon bootstrappackageicon-file-video"></span></f:case>
            <f:case value="mpg"><span class="bootstrappackageicon bootstrappackageicon-file-video"></span></f:case>
            <f:case value="mpeg"><span class="bootstrappackageicon bootstrappackageicon-file-video"></span></f:case>
            <f:case value="jpg"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="gif"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="png"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="bmp"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="ai"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="eps"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="ico"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="tga"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="tif"><span class="bootstrappackageicon bootstrappackageicon-file-image"></span></f:case>
            <f:case value="doc"    ><span class="fas fa-file-word"></span></f:case>
            <f:case value="ppt"    ><span class="fas fa-file-powerpoint"></span></f:case>
            <f:case value="pptx"   ><span class="fas fa-file-powerpoint"></span></f:case>
            <f:case value="docx"   ><span class="fas fa-file-word"></span></f:case>
            <f:case value="xls"    ><span class="fas fa-file-excel"></span></f:case>
            <f:case value="xlsx"   ><span class="fas fa-file-excel"></span></f:case>
            <f:case value="zip"    ><span class="fas fa-file-archive"></span></f:case>
            <f:case value="rar"    ><span class="fas fa-file-archive"></span></f:case>
            <f:case value="pdf"    ><span class="fas fa-file-pdf"></span></f:case>
            <f:case value="csv"    ><span class="fas fa-file-csv"></span></f:case>
            <f:case value="youtube"><span class="bootstrappackageicon bootstrappackageicon-youtube"></span></f:case>
            <f:defaultCase><span class="bootstrappackageicon bootstrappackageicon-file fas fa-file fa-file-{fileExt}"></span></f:defaultCase>
        </f:switch>
    </span>
</f:if>

here you get more file type specific icon with appropriate CSS classes. And the default fallback will include an class with the file extension to add additional icons on your own.

[1]
add this to your constants.typoscript:

plugin.bootstrap_package {
    view {
        layoutRootPath = EXT:my_site_extension/Resources/Private/Layouts/
        partialRootPath = EXT:my_site_extension/Resources/Private/Partials/
        templateRootPath = EXT:my_site_extension/Resources/Private/Templates/
    }
}

It will be used in the setup.typoscript of the bootstrap extension:

lib.contentElement {

    ################
    ### TEMPLATE ###
    ################
    templateName = Default
    templateRootPaths {
        0 = EXT:bootstrap_package/Resources/Private/Templates/ContentElements/
        10 = {$plugin.bootstrap_package_contentelements.view.templateRootPath}
    }
    partialRootPaths {
        0 = EXT:bootstrap_package/Resources/Private/Partials/ContentElements/
        10 = {$plugin.bootstrap_package_contentelements.view.partialRootPath}
    }
    layoutRootPaths {
        0 = EXT:bootstrap_package/Resources/Private/Layouts/ContentElements/
        10 = {$plugin.bootstrap_package_contentelements.view.layoutRootPath}
    }
    :