1

I am not a frontend developer and not familiar with npm, yarn and this sort of tools. However I want to render some data in a Kotlin/JS project. Particularly, I want to use font-awesome icons in my page. I've added implementation(npm("font-awesome", "4.7.0")) to the gradle file and import it in my index.html as following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <title>JS Client</title>
</head>
<body>
<script src="library.js"></script>
</body>
</html>

When I run my project and open it in the browser, html and js files are fetched from server except font-awesome.css which is getting 404 error.

What is the correct way to use font-awesome or other libraries in my project?

BTW, I've also added js("require('font-awesome/css/font-awesome.css')") to my Main.kt. But there is no change whether I comment it out or not. In both cases, the project is compiled and page is loaded without any problem.

Any help would be appreciated!

UPDATE:

Alongside index.html mentioned above, I have also gradle.build.kts and Main.kt in my project those are:

plugins {
    kotlin("multiplatform") version "1.8.20"
    kotlin("plugin.serialization") version "1.8.20"
}

group = "com.example"
version = "1.0-SNAPSHOT"

repositories {
    maven("https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven")
}

kotlin {
    js(IR) {
        binaries.executable()
        browser {
            commonWebpackConfig {
                cssSupport {
                    enabled.set(true)
                }
            }
        }
        binaries.executable()
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")

            }

        }
        val jsMain by getting {
            dependencies {
                implementation(npm("font-awesome", "4.7.0"))


                implementation("org.jetbrains.kotlinx:kotlinx-html:0.8.0")
                compileOnly("org.jetbrains.kotlin-wrappers:kotlin-browser-js:1.0.0-pre.549")
                runtimeOnly("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
            }
        }
    }
}

And:

package com.example

import kotlinx.browser.window

fun main() {
    window.onload = {
        js("require('font-awesome/css/font-awesome.css')")
    }
}

To run the project, I run gradle jsBrowserRun.

NOTE:

There exists build/js/node_modules/font-awesome/css/font-awesome.css.

vahidreza
  • 843
  • 1
  • 8
  • 19
  • could you create a minimal reproduction of this? – orirab May 23 '23 at 12:59
  • 1
    I just edited the post and explained all files. – vahidreza May 23 '23 at 13:15
  • To run it, just execute `gradle jsBrowserRun`. – vahidreza May 23 '23 at 13:24
  • https://fontawesome.com/docs/web/setup/host-yourself/webfonts looks like you've misspelt `font-awesome.css` (replace with `fontawesome.css`, or alternatively use `all.css` for debug temporarily). Also, could you show us your file tree, specifically where `index.html` is? – CoderMuffin May 23 '23 at 13:26
  • Nothing is changed with `fontawesome.css` and `all.css`. Also note that `index.html` is generated by IDEA when I created the new Kotlin multi-platform project and located in `library/src/jsMain/resources/`. – vahidreza May 23 '23 at 13:38

0 Answers0