标签: font-awesome

我正在尝试通过 ag-grid 中的 cellRenderer 添加Font Awesome图标。

如何<fa-icon>在单元格渲染中正确渲染标签？

这是我尝试的：

    {
      width: 150,
      headerName: 'Events',
      // tslint:disable-next-line: object-literal-shorthand
      cellRenderer: (params: any) => {
        const PHD: boolean = params.data.PHD;
        const DG: boolean = params.data.DG;
        const HOT: boolean = params.data.HOT;
        let result = '';
        if (PHD) {
          result = result + '<fa-icon [icon]="faCoffee"></fa-icon>';
        }
        if (DG) {
          result = result + '';
        }
        if (HOT) {
          result = result + '';
        }
        return result;
      },
      resizable: true,
      filter: false,
    }, …

我正在使用 Gatsby 和 Bulma 构建一个网站。在我的Nav.js文件中，我为网站顶部的按钮创建了通用格式，我有一些使用 Bulma 的按钮，我想在其中添加图标。我关闭了使用 Font Awesome Icons 添加 Bulma 按钮的文档：https://bulma.io/documentation/elements/button/。我的代码完全相同，除了我将按钮包装在标签中<a>以链接到网站中的其他页面之外。我<script>在文档中列出了包含的文件，可以使用 Font Awesome 图标，我的代码如下所示：

const Nav = () => {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    <nav>

    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

        <p class="buttons is-outlined is-centered">
          <a href="/"><button class="button is-outlined"> <span class="icon">
          <i class="fas fa-home"></i>
          </span>
          <span>Home</span>
          </button></a>


          <a href="/projects"><button class="button is-outlined">Projects</button></a>

          <a href="/experience"><button class="button is-outlined">Experience</button></a>
        </p>

      </nav>
    </div>
  )
}

我不确定我是否已将其script放置在文件的正确部分，并且我只是尝试为我的主页按钮放置一个图标，如下所示：

我猜图标应该在“主页”左侧的间隙处。对于为什么图标没有显示或显示为空白的任何帮助，我将不胜感激。谢谢你！

我已按照 Vuetify 中规定的安装过程在我的应用程序中使用 Font Awesome 图标Nuxt。

https://vuetifyjs.com/en/customization/icons/#install-font-awesome-5-icons

但是，图标不起作用。这是我的模板代码。

<v-btn v-for="icon in icons" :key="icon" class="mx-3" icon>
  <v-icon size="24px">
    {{ icon }}
  </v-icon>
</v-btn>

这是脚本代码。

<script>
export default {
  name: 'Footer',
  data () {
    return {
      icons: [
        'fab fa-facebook',
        'fab fa-twitter',
        'fab fa-linkedin',
        'fab fa-google-plus',
        'fab fa-instagram'
      ]
    }
  }
}
</script>

你们今天对react-native-vector-icons/FontAwesome 有问题吗？我使用的是react-native 版本>0.6，所以我认为问题不在于链接。

正如你们在图片中看到的那样，它没有显示我要求的任何图标，我不知道发生了什么......

这是我的 Android 模拟器上显示的图片： Print-Scream-Icon-Not-Showing-up

import React from 'react'
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'



export default function ActionButton(props) {

    return(
        <TouchableOpacity>
        <View style={styles.container}>
           
           <Icon name='plus' size={30} color='#777' />
           <Icon name='trash' size={30} color='#777' />
           <Icon name='search'  size={30} color='#777' />
        </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container:{
        justifyContent:'center',
        alignItems:'center',
        width:80,
        height:40,
        backgroundColor:'#FFF',
        elevation:9,
        marginTop:20,
        borderRadius:6,
        paddingVertical:15,
        marginBottom:10
       
    }
})

我的网站底部有一个页脚，其中包含一些很棒的图标：\n

我已经使图标可悬停，但如何让它们带我到网站（例如 GitHub 的 GitHub 图标）？

到目前为止我所拥有的演示：

* {\n  margin: 0;\n  padding: 0;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n.footer {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  background-color: #f1f1f1;\n  color: black;\n  text-align: center;\n  padding-top: 25px;\n  padding-bottom: 25px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\ni:hover {\n  color: #AEC6CF;\n  transition: 0.4s;\n  cursor: pointer;\n}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">\n\n<div class=\'footer\'>\n  <i class="fab fa-github" style=\'font-size:30px\'></i>\n  <i class="fab fa-stack-overflow" style=\'font-size:30px\'></i>\n  <i class="fab fa-github" style=\'font-size:30px\'></i>\n  <br></br>\n  <p>Copyright \xc2\xa9 2021 lunAr-creator - Website Design by me (who else? …

我正在单元格中具有以下标记的表格上测试 JAWS 屏幕阅读器：

<center><i class="fa fa-check fa-1" title="MyTitle" aria-hidden="true" style="color:green" aria-label="read me"></i></center>

我注意到屏幕阅读器无法“输入”上面的单元格（由于 ）aria-hidden，所以我将其删除：

<center><i class="fa fa-check fa-1" title="MyTitle" style="color:green" aria-label="read me"></i></center>

现在它可以进入单元格但不读取任何文本。

有什么方法可以放置一些只能由屏幕阅读器访问且在用户界面上不可见的文本吗？

首先我的配置：

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'\n\nexport default defineNuxtConfig({\n    // if you want to use static HTML generation (SSG)\n    target: 'static',\n\n    // if you want to use server-side rendering (SSR)\n    ssr: true,\n\n    css: [\n        'assets/scss/main.css',\n        'assets/scss/header.css',\n        '@fortawesome/fontawesome-svg-core/styles.css'\n    ],\n\n    build: {\n        transpile: [\n            '@fortawesome/vue-fontawesome',\n            '@fortawesome/fontawesome-svg-core',\n            '@fortawesome/pro-solid-svg-icons',\n            '@fortawesome/pro-regular-svg-icons',\n            '@fortawesome/free-brands-svg-icons'\n        ]\n    }\n\n})\n

/plugins/fontawesome.js

import { defineNuxtPlugin } from '#app';\n\n/** Fontawesome for Nuxt 3\n * https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt \n * \n*/\n\n// import the fontawesome core\nimport { library, config } from '@fortawesome/fontawesome-svg-core'\n\n// …

我做了什么:

我使用表单,字体真棒和标签创建了一个HTML测验.我正在使用来自字体awesome的图标圈和图标圈空白类替换为单选按钮以获得更加个性化的外观.我选择一个选项时,css会将字体真棒类的颜色更改为橙​​色.

我想做什么:

我试图做一个CSS属性,将标签的文本属性更改为相同的颜色选择字体真棒类.

CSS:

[type=radio] {
    display: none;
}
[type=radio] + label:before {
    content: "\f10c";
    color: #183e63;
    margin-right: 10px;
}
[type=radio]:checked + label:before {
    content: "\f111";
    color: #fcbc02;
    margin-right: 10px;
}
h3 {
    color: #5f93c5;
}
label {
    color: #183e63;
    font-weight: bold;
}

完整代码(http://jsfiddle.net/fTdRS/15/)

谢谢!

编辑:对不起"简单的问题",但我只是学习CSS,这是我第一次使用[type]属性.

我想在其上添加带有字符的超赞字体，但这样做失败。请帮助了解发生了什么问题。

输出：

尝试过的代码：

<i class="fa fa-square fa-2x" style="color:red;"><span style="text-color:white;">S</span></i>
<i class="fa fa-square fa-2x" style="color:yellow;"><span style="text-color:white;">XL</span></i>                                           
<i class="fa fa-square fa-2x" style="color:green;"><span style="text-color:white;">XXL</span></i>

我不确定是否已经存在这样的问题并且可能重复这个问题,但我想知道如何将SVG文件集合制作成与FontAwesome的JS完全相同的东西？

我想用所有的图标从这个包,并使其可被称为和HTML一样使用FontAwesome的JS例如<i class="icon-leaf"></i>,<i class="icon-sun"></i>或<i class="icon-rainbow"></i>.我见过一些在线工具,如https://icomoon.io/app/或http://fontello.com/,但这并不是我想要做的.我不需要css或webfonts(eot,woff等).我只想像上面的FontAwesome的js一样包含.js.