Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[listItem]="true" should add 'fa-li' class to the <fa-icon> component, not the inner SVG

See original GitHub issue

Comparing adding class=“fa-li” to <fa-icon> or using [listItem]=“true”, the icon becomes misaligned vertically:

<ul class="nav flex-column fa-ul">
    <li class="nav-item">
        <a class="nav-link" [routerLink]="['/welcome']" routerLinkActive="active">
            <fa-icon icon="home" [listItem]="true"></fa-icon>
            Welcome
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" [routerLink]="['/devices']" routerLinkActive="active">
            <fa-icon icon="desktop-alt" class="fa-li"></fa-icon>
            Devices
        </a>
    </li>
</ul>

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

robmadolecommented, May 31, 2018

@devoto13 yeah, there is some special work that has gone into making fa-ul and fa-li work together and “do what you would expect”. I remember Dave and I going back and forth for a few days as we cross-browser tested and really honed those. They are worthwhile to have but not worthwhile to support in the angular-fontawesome component.

0reactions

robmadolecommented, Jun 1, 2018

It’s not a pattern that we want to rely on @pathurs.

Top Results From Across the Web

CSS not applying on SVG element under font awesome icon

I have a font awesome icon like this on my page <fa-icon class="file-excel-icon" title="Export to Excel" [icon]="['sil', ...

How to use the @fortawesome/fontawesome-svg-core.config ...

autoAddCss function in @fortawesome/fontawesome-svg-core ... as long as we are on the same page, the component will * not be unmounted and remounted....

devoto13/angular-fontawesome - npm

This package, under the hood, uses SVG with JS and the @fortawesome/fontawesome-svg-core library. This implementation differs drastically from ...

Introducing Font Awesome 5 and SVG icons - Discourse Meta

We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG...

Submit malware for free analysis with Falcon Sandbox and Hybrid Analysis technology. ... Not all malicious and suspicious indicators are displayed.