Problem using Font Awesome for a Custom text in a view

Question

I have a custom entity (contract) created in a custom module (amap) by a bunch of BaseFieldDefinition.

This is the corresponding form.

One of the fields is a file defined this way.

$fields['file1'] = BaseFieldDefinition::create('file')
  ->setLabel(t('Source file'))
  ->setDescription(t('Source file (may be modified)'))
  ->setSettings([
    'target_type' => 'file',
    'file_extensions' => 'doc docx odt pages',
    'file_directory' => 'contrats',
  ])
  ->setDefaultValue('')
  ->setDisplayOptions('view', [
    'label' => 'above',
    'type' => 'string',
    'weight' => $weight,
  ])
  ->setDisplayOptions('form', [
    'type' => 'string_textfield',
    'weight' => $weight,
  ])
  ->setDisplayConfigurable('form', TRUE)
  ->setDisplayConfigurable('view', TRUE)
  ->setReadOnly(TRUE);

I have a view about a custom entity that displays some fields in table mode.

The actions are defined using Custom text. For example, the first one is the following one.

I use Font Awesome Icons in these Custom texts, and I have a problem with this: If the field 'file1' doesn't exist (as in the second row), it displays exclamation-triangle icon with no link, which is OK; if 'file1' exists (as in the first row), it displays the download icon with a link to the file (which is OK) and the exclamation-triangle icon with no link (which shouldn't be there).

What is wrong?

By the way, if I replace Font Awesome icons by a simple character, it works as expected.

{% if file1__target_id %}
  A
{% else %}
  B
{% endif %}

This is the HTML markup of the part of the page related to the view output (header and two rows).

<div id="block-mayo-content" class="block block-system block-system-main-block">
    <div class="content">
        <div class="views-element-container contextual-region">
            <div class="contextual-region view view-amap-contracts view-id-amap_contracts view-display-id-page_1 js-view-dom-id-404c9a70ff66dba6ebf5ff803693aafc74ec9d93a006df3b4e5af9de3b1c1b30">
                <div data-contextual-id="entity.view.edit_form:view=amap_contracts:location=page&amp;name=amap_contracts&amp;display_id=page_1&amp;langcode=fr" data-contextual-token="P56DWcQ_TYjoKxCel2ETjrZhR1bCqk6wRud80xjPtno">
                </div>
                <div class="view-header">
                    <a href="/amap/contract/add?destination=amap/contracts" title="Ajouter un contrat"><i class="fas fa-plus-square"></i></a> 
                </div>
                <div class="view-content">
                    <table class="views-table views-view-table cols-7 sticky-enabled">
                        <thead>
                            <tr>
                                <th class="views-align-left views-field views-field-type views-align-left" id="view-type-table-column" scope="col">Type</th>
                                <th class="views-align-left views-field views-field-name views-align-left" id="view-name-table-column" scope="col">Nom</th>
                                <th class="views-align-center views-field views-field-startdate views-align-center" id="view-startdate-table-column" scope="col">Date début</th>
                                <th class="views-align-center views-field views-field-enddate views-align-center" id="view-enddate-table-column" scope="col">Date fin</th>
                                <th class="views-align-left views-field views-field-referentid views-align-left" id="view-referentid-table-column" scope="col">Référent</th>
                                <th class="views-align-center views-field views-field-isvisible views-align-center" id="view-isvisible-table-column" scope="col">Visible</th>
                                <th class="views-align-left views-field views-field-nothing views-align-left" id="view-nothing-table-column" scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="odd">
                                <td headers="view-type-table-column" class="views-field views-field-type views-align-left"><a href="/amap/contract_type/1" hreflang="und">Fruits rouges</a> </td>
                                <td headers="view-name-table-column" class="views-field views-field-name views-align-left"><a href="/sites/default/files/contrats/Contrat-1-20190101.pdf" target="_blank">Contrat Fruits rouges 2019</a> </td>
                                <td headers="view-startdate-table-column" class="views-field views-field-startdate views-align-center">01/01/2019 </td>
                                <td headers="view-enddate-table-column" class="views-field views-field-enddate views-align-center">31/12/2019 </td>
                                <td headers="view-referentid-table-column" class="views-field views-field-referentid views-align-left"><a href="/association/person/11" hreflang="und">Falzon Eric</a> </td>
                                <td headers="view-isvisible-table-column" class="views-field views-field-isvisible views-align-center">Oui </td>
                                <td headers="view-nothing-table-column" class="views-field views-field-nothing views-align-left views-field-nothing-2 views-field-nothing-5 views-field-nothing-3 views-field-nothing-4 views-field-nothing-1"><a href="/amap/contract/1/edit?destination=amap/contracts"><i class="fas fa-edit" title="Éditer le contrat"></i></a> <a href="/amap/contract/1/delete?destination=amap/contracts"><i class="fas fa-trash" title="Supprimer le contrat"></i></a> <a href="/amap/contract/1/subscribe?destination=amap/contracts"><i class="fas fa-list-alt" title="Entrer les souscriptions"></i></a> <a href="/amap/contract/1/Fruits%20rouges/export?destination=amap/contracts"><i class="fas fa-file-csv" title="Exporter le contrat"></i></a> <a href="/sites/default/files/contrats/Contrat-1-20190101.docx" target="_blank"><a href=" /sites/default/files/contrats/Contrat-1-20190101.docx "><i class="fas fa-download" title="Télécharger l'original"></a> </a> </td>
                            </tr>
                            <tr class="even">
                                <td headers="view-type-table-column" class="views-field views-field-type views-align-left"><a href="/amap/contract_type/1" hreflang="und">Fruits rouges</a> </td>
                                <td headers="view-name-table-column" class="views-field views-field-name views-align-left">Contrat Fruits rouges 2020 </td>
                                <td headers="view-startdate-table-column" class="views-field views-field-startdate views-align-center">01/01/2020 </td>
                                <td headers="view-enddate-table-column" class="views-field views-field-enddate views-align-center">31/12/2020 </td>
                                <td headers="view-referentid-table-column" class="views-field views-field-referentid views-align-left"><a href="/association/person/11" hreflang="und">Falzon Eric</a> </td>
                                <td headers="view-isvisible-table-column" class="views-field views-field-isvisible views-align-center">Oui </td>
                                <td headers="view-nothing-table-column" class="views-field views-field-nothing views-align-left views-field-nothing-2 views-field-nothing-5 views-field-nothing-3 views-field-nothing-4 views-field-nothing-1"><a href="/amap/contract/2/edit?destination=amap/contracts"><i class="fas fa-edit" title="Éditer le contrat"></i></a> <a href="/amap/contract/2/delete?destination=amap/contracts"><i class="fas fa-trash" title="Supprimer le contrat"></i></a> <a href="/amap/contract/2/subscribe?destination=amap/contracts"><i class="fas fa-list-alt" title="Entrer les souscriptions"></i></a> <a href="/amap/contract/2/Fruits%20rouges/export?destination=amap/contracts"><i class="fas fa-file-csv" title="Exporter le contrat"></i></a> <i class="fas fa-exclamation-triangle " title="Pas d'original à télécharger"> </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

This is how I use the view UI to define the problematic icon.

Posting the HTML code produced the good and faulty icons in your question could shed some light on the problem and we might be able to help you — GiorgosK, Mar 23 '19 at 16:42
Just relevant code would be better actually if you can. Also how are you instructing drupal to display those icons ? custom code ? configuration ? where ? are you using drupal.org/project/issues/fontawesome ? did you search the issue queue. — GiorgosK, Mar 24 '19 at 9:38
What would be "relevant code"? To display the icons, I use Views UI. See the screen capture of the problematic field that I attached to my question in [Edit2]. — gbmapo, Mar 24 '19 at 15:47
I meant that we don't need the whole html, only what is close to the PROBLEM but its fine. Take a look at Hudri's answer, he has a point see how/why this is happening. Try to uncompicate things by doing Rewrite results: Output this field as a custom link on the a different Custom field before or after to see where the problem is. — GiorgosK, Mar 24 '19 at 16:32

Hudri · Accepted Answer · 2019-03-24 13:48:52Z

-1

You have nested link tags <a...><a...></a></a> - this is invalid HTML. Most browsers try to fix this by breaking it into two links <a...></a> <a...></a>, which most likely causes two icons in your case.

answered Mar 24 '19 at 13:48

Hudri

3,5122 gold badges10 silver badges28 bronze badges

I agree! My problem is that I don't know how Views UI makes it happen... – gbmapo Mar 24 '19 at 15:47
Most likley (Views single Field Settings) "Rewrite Settings" > "Output this field as a custom link" or (Views single Field Settings) Checkbox "Link to this entity" .... maybe a combination of those two? – Hudri Mar 24 '19 at 16:55

add a comment |

Stack Exchange Network

current community

your communities

more stack exchange communities

Problem using Font Awesome for a Custom text in a view

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged views 8 or ask your own question.

Hot Network Questions

Problem using Font Awesome for a Custom text in a view

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged views 8 or ask your own question.

Related

Hot Network Questions