react使用FontAwesome字图标库

最新推荐文章于 2024-05-23 11:24:36 发布
最新推荐文章于 2024-05-23 11:24:36 发布
阅读量6k 收藏 2
点赞数
分类专栏： ant design html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CarinaYang/article/details/81663599
版权

如图，项目要求实现的效果是这样的：

然后我做出来的效果是这样的：

很明显三角形图标不一致，因为antDesign的<Icon>图标只有这个：

在找字图标的途中看到FontAwesome有这种字图标，决定拿来用，于是照着文档来引用：

htt

最低0.47元/天 解锁文章
CarinaYang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
初识 react（2）——如何在 React 中使用 font awesome 图标
小R.的博客
03-21 776
  最近在做react项目，过程中遇到了一些问题。比如：   如何在 react 中使用 font awesome 图标?   平时我们都是在 HTML 中引入 <link rel="stylesheet" href="css/font-awesome.min.css" />   并在项目中引入 fonts 文件，便成功使用 font awesome 图标。   但在react项目中...
React font awesome icons图标
Northeast_Husky的博客
11-21 343
菜鸟笔记。 其实官网教程都有：https://fontawesome.com/how-to-use/on-the-web/using-with/react 首先是本地安装： font awesome根据style和证书把icon分到了几个不同的package，所以需要根据style选择package安装。详情看这里：https://fontawesome.com/how-to-use/javascript-api/setup/importing-icons#icon-names npm i --sa
React 小图标Font Awesome，适配移动端rem，嵌套多层组件传值用 React.createContext 无需经过n层传递
最新发布
weixin_47529732的博客
05-23 295
/ 除以几视口的宽度就是多少rem，现在我们设置视口的总宽度为750rem。根据设计稿宽度改变750的值。// 设置移动端的适配。在 index.js。
用 CSS 实现三角形
chunlu2438的博客
09-08 88
1.利用 border 属性实现三角形 怎么border能实现三角形呢？是不是很神奇？别着急，先来看看一个梯形： .triangle{ width:30px; height:30px; ...
react awesome_如何在React中使用Awesome 5字体
08-17 531
react awesome 介绍 (Introduction) Font Awesome is a toolkit for websites that provides icons and social logos. React is a coding library that is used for creating user interfaces. While the Font Awesome...
react笔记之引入FontAwesome
qq_41632427的博客
12-26 282
前端
react-fontawesome 字图标库
diwang_718的博客
10-26 1139
1、react-fontawesome ：一款非常好用的字图标库 官网地址：地址 github地址：https://github.com/FortAwesome/react-fontawesome 安装 npm: npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/react-fontawesome
react中图标的使用
09-17 1853
图标库的种类 这里我们介绍2种：阿里图标库、font-Awesome font-Awesome的使用方法 1、去font-Awesome官网（http://www.fontawesome.com.cn/）下载font-Awesome文件夹 2、 将文件夹放到项目的public中 3、在index.html的head标签中加上 <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> 4、使用时直接写 <i
Font Awesome网页字体图标库 5.10.2
11-05
Font Awesome 是一个广泛使用的网页图标库，其5.10.2版本提供了丰富的矢量图标资源，对于前端开发者来说是一个非常实用的工具。这个库的特点在于它的图标是基于Web字体的，这意味着它们不是图片，而是可以像文字一样...
react-fontawesome：一个React Font Awesome组件
02-05
React出色 一个很棒的字体图标库的React组件。 如果您使用的是Font Awesome v5 +，请使用 。 react-fontawesome不支持FontAwesome v5！ 该项目不再得到积极维护。 如果可以，请尝试使用上面的官方组件！安装npm ...
Font Awesome图标字体 4.7.0
05-01
FontAwesome是一款基于CSS框架的网页字体图标库，它完全免费，为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可用CSS的样式，除此之外，还有SVG框架，流行前端库(如React)的官方NPM包以及访问新CDN等...
antd-emoji-picker:类似于Ant Design的Emoji Picker组件，用于React
04-06
安装 npm install --save antd-emoji-picker 用法 import 'antd-emoji-picker/antd-emoji-picker.css' ; import { EmojiPicker } from 'antd-emoji-picker' ; < EmojiPicker xss=removed> 道具 与customButton: true Struts 描述 类型 onSelect 选定事件的回调 （selectedEmoji：ISelectedEmoji）=>无效 customEmojiList 在选择器中支持自定义表情符号列表 Map <string> customButton 启用自定义选择器触发按钮的道具 真的 按钮 支持自定义选择器触发按钮组件 React.ReactEle
react-fileicons：简单直观的react组件，用于可视化文件图标:sparkles:
02-04
react-fileicons- react-fileicons是用于可视化文件图标的简单直观的react组件。 演示版 您可以在故事书。 用法 首先，您应该导入所需的文件。 import FileIcon , { ColorScheme , IconStyle } from "react-fileicons" ; 之后，您可以使用FileIcon组件。 要更改组件的颜色，可以使用内置的颜色列表ColorScheme 。 < FileIcon extension = "doc" colorScheme = { ColorScheme . red } iconSt
emoji-picker-react:React表情符号选择器
04-28
表情符号选择器React V3 在安装之前需要了解什么？ 版本3使用React钩子，这意味着您需要使用React 16.8或更高版本。 与以前的版本不同，此版本使用Apple表情符号。 V3不支持SSR。 假定仅在用户在浏览器中进行交互之后才安装它。 将来可能会添加SSR支持。 安装 npm i emoji-picker-react 或者 yarn add emoji-picker-react v3的新功能 更大的表情库。 苹果表情符号，而不是表情符号。 最近使用的表情符号支持。 更快的加载时间，提高了性能。 能够设置默认肤色。 用法 Emoji-picker-react可以立即使用，需要零配置。 您唯一需要做的就是添加自己的表情符号点击回调。 import React , { useState } from 'react' ; import Picker from 'em
fontawesome 6.1 pro
03-21
Fontawesome 6.1 Pro是一款深受开发者和设计师喜爱的图标库，它提供了丰富的矢量图标、字体和CSS工具，使得在网页设计和开发过程中轻松添加和定制图标成为可能。这个专业版包含了更多高级特性和图标，旨在提升用户...
Font Awesome图标字体 5.15.1
05-01
FontAwesome是一款基于CSS框架的网页字体图标库，它完全免费，为您提供可缩放矢量图标，它可被定制大小、颜色、阴影以及任何可用CSS的样式，除此之外，还有SVG框架，流行前端库(如React)的官方NPM包以及访问新CDN等...
React + Antd 实现 icon 选择
ooooooooooos的博客
11-06 882
React 实现选择 Antd icon
React Native 图片选择器组件for Android , 基于react-native-image-crop-picker
weixin_44271194的博客
08-12 248
React Native image-picker component for Android , base on react-native-image-crop-picker. Supports photo or local album uploading.React Native 图片选择器组件for Android，基于react-native-image-crop-picker开发，支持拍照或本地相册上传小图标的显示用到了react-native-vector-iconsreact-native-i
纯css绘制三角形图标
flowRight的博客
05-06 908
.carset{ display: inline-block; width: 0px; height:0px; border-style: solid; border-width: 8px; border-color: transparent transparent transparent red; } 效果如下 ![在这里插入图片描述]...
fontawesome react
08-17
对于在React项目中使用FontAwesome图标，你可以使用react-fontawesome库。以下是在React中使用FontAwesome的一般步骤： 1. 首先，在你的项目中安装react-fontawesome库。你可以使用npm或者yarn来安装： ``` npm ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值