相关疑难解决方法(0)

Font Awesome 无法在 Stencil JS 组件内部工作

模板版本： @stencil/core@1.3.0

我想在我的 Stencil 组件中使用 Font Awesome。

我按照以下步骤进行操作https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

创建“Stencil 组件入门”项目
安装真棒字体：npm install --save-dev @fortawesome/fontawesome-free
参考 Font Awesome 里面src/index.html：

<script src="../node_modules/@fortawesome/fontawesome-free/css/all.css"></script>
<script src="../node_modules/@fortawesome/fontawesome-free/js/all.js"></script>

Run Code Online (Sandbox Code Playgroud)

在我的组件中添加图标：

      render() {
        return (
          <button>
            <i class="fas fa-camera"></i>
          </button>
        );
      }

Run Code Online (Sandbox Code Playgroud)

我无法在我的模板组件中包含很棒的字体。我被困在这里：<i class="fas fa-camera"></i>

font-awesome stenciljs

JEr*_*caM

2022 11-08

6
推荐指数

1
解决办法

4006
查看次数

如何让导入的css对阴影dom中的元素产生影响？

假设我想使用阴影dom创建自定义元素.模板中的某些元素具有在链接的css文件中指定的类名.现在我想让css规则对元素产生影响.但由于影子dom风格的边界,我无法实现.

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<template id="blog-header">
<header>
    <h1>DreamLine</h1>
    <nav>
        <ul>
            <li><a href="#0">Tour</a></li>
            <li><a href="#0">Blog</a></li>
            <li><a href="#0">Contact</a></li>
            <li><a href="#0">Error</a></li>
            <li><a href="#0"><i class="fa fa-search"></i>Search</a></li>
        </ul>
    </nav>
</header>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
        value: function () {
            var t = importDoc.querySelector("#blog-header");
            var clone = document.importNode(t.content, true);
            this.createShadowRoot().appendChild(clone);
        }
    }
});
document.registerElement("blog-header", {
    prototype: proto
});
</script>

Run Code Online (Sandbox Code Playgroud)

你看,fa-search是一个在font-awesome css文件中定义的类,我该如何设置<i>元素的样式？

javascript web-component shadow-dom html5-template custom-element

Zhe*_*Bai

2019 08-22

5
推荐指数

1
解决办法

1135
查看次数

在HTML 5 Web组件中使用超棒的字体

我正在开始使用HTML5 Web组件。我正在使用，pollyfill webcomponents.js并使用chrome进行开发。如何在Web组件中使用很棒的字体。我已经尝试了CDN和它们提供的脚本标签。我以为这会工作:(但是没有，为了简洁起见我也省略了js）

.wrapper {
  height: 100%;
  width: 100%;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .1);
}
.month-title {
  height: 20%;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.day-body {
  height: 70%;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#title {
  height: 10%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
}
#monthTitle {
  flex-grow: 1;
  background-color: #4cff00;
}
.month-button {
  background-color: #ffd800;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://use.fontawesome.com/4483f1d3f2.js"></script>

<div class="wrapper snow">

  <div id="title">

    <div id="leftButton" …

Run Code Online (Sandbox Code Playgroud)

html5 font-awesome

Mic*_* Jr

2016 05-12

5
推荐指数

1
解决办法

707
查看次数

Web 组件 - 字体和材质图标不起作用 (@font-face)

我正在尝试通过运行以下命令使用 vue cli 3 创建一个 Web 组件

vue-cli-service build --target wc --name wc-demo 'src/App.vue'

我在 Web 组件中加载字体和材质图标时遇到问题。

我进口的Roboto-font.scss和材料icon.scss的风格标签内App.vue这是用于创建Web组件条目。

<style lang='scss'>
// @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import "~@/assets/fonts/roboto-font/roboto-font.scss";
@import "~@/assets/fonts/material-icons/material-icons.scss";
</style>

Run Code Online (Sandbox Code Playgroud)

Material-icon.scss

$font-dir: "assets/fonts/material-icons/web-font/";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  // src: url('https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2') format("woff2");

  src: url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2") format("woff2"),
  url("#{$font-dir}flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff") format("woff");
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
} …

Run Code Online (Sandbox Code Playgroud)

fonts font-face web-component

roh*_*tvc

lucky-day

5
推荐指数

1
解决办法

1106
查看次数

Shadow dom 内的 FontAwesome svg

我正在尝试在 Web 组件中使用 font awsome js/svg 库，但图标不会显示。这可能吗？

我正在尝试在现有的 webforms 项目中实现一个角度组件，而无需 css 和脚本“流血”，关于如何做到这一点还有其他建议吗？iframe 不是一个选项。

    <html>
    <head>
        <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer>
        </script>
        <script>
            customElements.define('my-holder', class extends HTMLElement {
                constructor() {
                    super();

                    console.log("constructor");
                    let shadowRoot = this.attachShadow({
                        mode: 'open'
                    });

                    const t = document.querySelector('#holder');
                    const instance = t.content.cloneNode(true);

                    shadowRoot.appendChild(instance);
                }

                connectedCallback() {
                    console.log("callback");
                }
            });
        </script>
    </head>

    <body>
        <div id="outside">
            light dom
            <div class="fa-4x">
                <span class="fa-layers fa-fw" style="background:MistyRose">
                    <i class="fas fa-circle" style="color:Tomato"></i>
                    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                </span>
            </div>
        </div>

        <template id="holder"> …

Run Code Online (Sandbox Code Playgroud)

javascript webforms web-component font-awesome angular

use*_*186

2020 05-04

5
推荐指数

1
解决办法

2553
查看次数