标签: icons

我正在尝试在我的 React 应用程序中使用羽毛图标。到目前为止，我已将以下内容添加到我的 index.html 文件中

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
  feather.replace()
</script>

然后我在我的一个组件文件中包含了一个带有羽毛图标的按钮：

<li className="nav-item">
   <a className="nav-link" href="#">
       <span data-feather="settings"></span>
         Settings
   </a>
</li>

但是图标还是没有出现。我是 React 的新手，在将羽毛图标导入我的组件文件时我做错了什么吗？

我正在使用带有onClick属性的 IconButton来捕获事件以关闭持久的右侧抽屉。这一切都非常完美：

const styles = {
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
  close: {
    margin: 10,
    opacity: 0.7,
  }
};

class ContextDrawer extends Component {

  render() {
    const { classes } = this.props;

    const sideList = (
      <div className={classes.list}>
        <CheckedList />
      </div>
    );

    return (
      <div>
        <Drawer
          variant="persistent"
          anchor="right"
          open={this.props.open}
        >
          <div
            tabIndex={0}
            role="button"
          >
          <IconButton onClick={this.props.closeContextDrawer}>
            <CancelIcon className={classes.close} />
          </IconButton>
            {sideList}
          </div>
        </Drawer>
      </div>
    );
  }
}

export default withStyles(styles)(ContextDrawer);

``

这给了我这个：

但是， …

我无法在弹出窗口中添加 Font Awesome 图标。请帮我弄清楚它是如何工作的。我不知道如何在 CSS 中添加图标和更改颜色。

这是 HTML

<i class="fas fa-check-circle">

这是CSS：

.fa-check-circle {color: #ffffff;}

怎么了？它不起作用。我看不到弹出窗口中的图标。 这是我的别针

在我的项目中，我使用自定义svg文件作为要求的一部分。我正在使用它material-ui@3.9.3来实现这一目标。我查看了官方文档中提供的示例-> https://material-ui.com/style/icons/#svg-icons

但是，在我的版本中，自定义图标的显示方式不同。我的分叉版本可在https://codesandbox.io/s/mqnq9qrqn8 获得

我正在寻找的是一种使用可以与 Material-UI 的<Icon>组件很好地配合使用的自定义图标的方法。

有人可以帮我解决这个问题吗？谢谢

长期读者，第一次海报。我想让一个材料汉堡在单击时转换为“X”，然后在 Angular 应用程序中再次单击时转换回来。网站https://material.io/design/iconography/animated-icons.html#transitions 显示有我想要的动画，但没有关于如何做的文档。

我尝试了一种 CSS 方法，但它没有显示出来，最好使项目与材质图标保持一致。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar top-bar"></span>
  <span class="icon-bar middle-bar"></span>
  <span class="icon-bar bottom-bar"></span>
</button>

CSS

navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
}

.navbar-toggle.collapsed {
  .top-bar {
    transform: rotate(0);
  } …

我喜欢有角材料的设计，但使用它可能会很痛苦。该站点显示了一个使用示例

<mat-icon>home</mat-icon>

但是，当我在我的项目中做同样的事情时，我只看到文本“家”。

除了导入 MatIconModule 之外，我看不到哪里需要做任何事情。

有人有线索吗？

我正在使用角材料 v8.0.1。我还安装了 material-design-icons v 3.0.1。并将其放在我的 index.html 中。（我一次做了一个）

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

我想在 Vaadin 中更改与 Springboot 结合的网站的 favicon。我还选择在 Vaadin 中采用纯 Java 路线（无 html 页面）。

我遵循了这个指南，它解释了我希望使用的图标应该添加到src/main/webapp/icons文件夹中，在那里它会被自动拾取、调整大小等。

我试过无济于事，之后我发现这个线程，然后这一个。后一个链接特别说明了 Spring-boot 有自己的目录，webapp应该避免使用该文件夹。我尝试使用 spring 目录，但再次无济于事。

我的资源文件夹目前看起来是这样的：

我的 MainView 是这样的：

@Route
@PageTitle("My new title")
public class MainView extends VerticalLayout {

我的SpringBootApplication班级是这样的：

@SpringBootApplication
public class MyVaadinApplication extends SpringBootServletInitializer {
    public static void main(String[] args) {
        SpringApplication.run(MyVaadinApplication.class, args);
    }
}

图标仍然是默认的弹簧叶：

尝试设置网站图标时我哪里出错了？

我正在创建一个 mini-JavaFX 项目并想使用 Awesome Font Icon Pack。我使用 Scenebuilder 加载了 fontawesomefx-8.9 并在其中打开了 FXML 并在其中加载了两个图标，还在 IntelliJ 的外部库中添加了 JAR 文件但是当我运行代码时，它为 de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView 提供了 ClassNotFoundException。我该怎么办？

我删除了两个图标，代码运行良好。我搜索了很多地方，但它只显示将 JAR 文件添加到外部库中，什么也没有。我正在使用 JDK 12、JavaFX 12 和 Scenebuilder 11.0。

FXML 文件

<?xml version="1.0" encoding="UTF-8"?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<fx:root alignment="center" hgap="10" type="GridPane" vgap="10" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <Button mnemonicParsing="false" text="Click Me!!!">
         <opaqueInsets>
            <Insets left="5.0" />
         </opaqueInsets></Button>
      <FontAwesomeIconView glyphName="CIRCLE" />
   </children>
   <columnConstraints>
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
   </rowConstraints>
</fx:root>

控制器类

package sample; …

今天我收到了一封来自 Facebook 的电子邮件。（在雷鸟中）

我注意到“发件人/货车”字段前面的“facebook”图标。
我的研究

• 电子邮件的来源

• 进入一个BIMI记录

• DKIM

• 图标

没有成果，我找不到对图标的引用。

问题是，在邮件地址前面获取图标的机制是什么？这只雷鸟吗？

我试图在 UI Kitten 中使用 Eva 图标，但最终得到了这个错误，我在这个问题上挖了一段时间，React 和 Reavt-Native 的新手，如果有人能帮助我，我会很高兴（：

render()
const FacebookIcon = (props) => (
  <Icon name='facebook' {...props} />
);
return(
  <Input
    value={this.state.id}
    label="FB ID"
    size="medium"
    placeholder="Enter your fb_id"
    onChangeText={(enteredText) => this.setState({ fbId: enteredText })}
    accessoryLeft={FacebookIcon}
/>


)