Into my laravel 8 app with tailwindcss2/inertiajs I try to apply tailwindcss2 styles which have a lot of icons like :

<i data-feather="chevron-down"></i></div>

I do not see any icons, though I applyed all css files from source templates.

It does not look like package

"@fortawesome/fontawesome-free": "^5.15.4",

which I use in my laravel apps

Which packages/fonts have I to add to my app to see these icons? In package.json I have :

"devDependencies": {
    "@inertiajs/inertia": "^0.10.0",
    "@inertiajs/inertia-vue3": "^0.5.1",
    "@inertiajs/progress": "^0.2.6",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^2.0.1",
    "vue": "^3.0.5",
    "vue-loader": "^16.1.2"
},
"dependencies": {
    "moment-timezone": "^0.5.34"
}

Thanks!

CodePudding user response：

Using Font-Awesome works well on standard <i> HTML with classes.

Perhaps give this a try:

<i class="chevron-down"></i>

If you are looking for the feather icon JS, you may be crossing the streams here, that may be a separate package of SVG icons (unpkg.com) that needs to be loaded as a script.

E.g.

<script src="https://unpkg.com/feather-icons"></script>

CodePudding user response：

Maybe you havn't initialized feather icons by:

feather.replace()

// init feather icons
feather.replace()

<script src="https://unpkg.com/[email protected]/dist/feather.min.js"></script>
<!-- example icons -->
<i data-feather="eye"></i>
<i data-feather="heart"></i>
<i data-feather="feather"></i>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

BTW. fontAwesome uses different icon class names. So you should't encounter any conflicts.