个人中心
gpt4 book ai didi

npm - 通过NPM的Font Awesome 5 Bundle

转载 作者：行者123 更新时间：2023-12-03 11:56:38 24 4
gpt4 key购买 nike

我正在尝试通过webpack bundle 仅需要的Font Awesome 5图标，但在DOM中不会替换这些图标。

  • 我已经从documentation添加了所有必需的软件包:
    yarn add -D @fortawesome/fontawesome
    yarn add -D @fortawesome/fontawesome-pro-solid
    yarn add -D @fortawesome/fontawesome-pro-regular
    yarn add -D @fortawesome/fontawesome-free-brands
  • 包含以下定制JS:
    "use strict";

    import fontawesome from '@fortawesome/fontawesome';
    import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';

    fontawesome.icon(faCheck);

    function iconsDoneRendering () {
        console.log('Icons have rendered'); // No output in console
    }

    fontawesome.dom.i2svg({ 
        callback: iconsDoneRendering,
    })
  • HTML模板:
    <head>
        <link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
    </head>
    <body>
        <ul class="fa-ul">
            <li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
            <li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
        </ul>
        <script src="/js/app.js?v2.1.4"></script>
    </body>

    • svg路径在 bundle 的JS文件中，但是我无法弄清楚需要调用哪种方法。

    以下JS代码解决了该问题(自v5.0.2开始): 
    "use strict";

    import fontawesome from '@fortawesome/fontawesome';
    import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
    import faPhone from '@fortawesome/fontawesome-pro-regular/faPhone';

    fontawesome.library.add(faCheck,faPhone);

    最佳答案

    我们刚刚发布了5.0.2版，并更新了@fortawesome NPM软件包，以修复与此相关的一些错误。在尝试任何其他操作之前，请确保升级。

    上面的示例缺少的步骤是将图标添加到库中:

    fontawesome.library.add(faCheck)

    关于npm - 通过NPM的Font Awesome 5 Bundle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47711951/

    24 4 0
    文章推荐： eclipse - 未能在Maven项目中收集依赖项
    文章推荐： python - 属性错误 : module 'socket' has no attribute 'AF_INET'
    文章推荐： c - 我需要分别接收两个数据包 - linux将它们合并为一个并发送给应用程序
    文章推荐： log4net - 为什么在使用Log4Net时在文件名上附加日期两次？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com