资讯专栏INFORMATION COLUMN

iconfont在react中完整使用教程

mylxsw / 1681人阅读

摘要:查阅部分文件,找到相关资料,发现是在纯页面中导入是完全的。但是请注意,咱们将静态资源放置在目录下,中的不可采用。于是,正确做法如下在文件下的或者等文件中写入如下语句即可。第四步介绍使用方法待我研究去吧。。。

hello,各位小伙伴们,很久没写文章了。
突然要自己搭建项目了,项目中对于阿里巴巴iconfont的使用,大家都清楚吗?

第一步:将图标加入购物车

第二步:将图标下载到本地,将如下文件放置在react项目中assets目录下

第三步:导入iconfont.css到项目目录,鄙人踩坑点在此。
查阅部分文件,找到相关资料,发现是在纯html页面中导入是完全OK的。

但是请注意,咱们将静态资源放置在src目录下,public中的index.html不可采用。
于是,正确做法如下:
在src文件下的index.js或者app.js等文件中写入如下语句即可。
import "./assets/fonts/iconfont.css";

第四步:介绍使用方法

unicode: 
font-class:
symbol:待我研究去吧。。。

备注:
如果发现页面没有更新,可以重启一下服务。
以上就是关于iconfont的介绍了,大家可以踊跃查阅资料,在此希望能够给到小伙伴们一些帮助呀!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114785.html

相关文章

  • iconfontreact完整使用教程

    摘要:查阅部分文件,找到相关资料,发现是在纯页面中导入是完全的。但是请注意,咱们将静态资源放置在目录下,中的不可采用。于是,正确做法如下在文件下的或者等文件中写入如下语句即可。第四步介绍使用方法待我研究去吧。。。 hello,各位小伙伴们,很久没写文章了。突然要自己搭建项目了,项目中对于阿里巴巴iconfont的使用,大家都清楚吗? 第一步:将图标加入购物车 showImg(https://...

    Prasanta 评论0 收藏0
  • react-native添加高可维护的iconfont字体

    摘要:没关系,笔者已经为你们准备好了,请保存到文件中,假设你的文件名叫和你刚才保存的字体文件在一起,方便管理复制字体这个插件包有好多套字体,我们可以需要把自己的也复制到包中对应文件夹,当然了,不可能手动复制,笔者从来都是解放双手的。 字体图标盛行的年代,在项目里使用一套不失真又可以随意改变大小颜色的图标,是多么舒服的一件事。这里要推荐iconfont.cn,超多免费图标,当然了,你的专属美工...

    CarterLi 评论0 收藏0
  • React Native 使用阿里 iconfont 图标

    摘要:熟悉前端开发的大家都一定知道,在网站下载图标集,会自带教程告诉你如何在网页使用。但是在中,跟网页使用的步骤就不同了。 熟悉前端开发的大家都一定知道 iconfont.cn,在网站下载图标集,会自带教程告诉你如何在网页使用 iconfont。但是在 React Native 中,跟网页使用的步骤就不同了。我最开始百度出来的文章,不少都推荐借用 react-native-vector-ic...

    young.li 评论0 收藏0
  • 前端学习资源整理

    稍微整理了一下自己平时看到的前端学习资源,分享给大家。 html MDN:Mozilla开发者网络 SEO:前端开发中的SEO css 张鑫旭:张鑫旭的博客 css精灵图:css精灵图实践 栅格系统:详解CSS中的栅格系统 媒体查询:css媒体查询用法 rem布局:手机端页面自适应布局 移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局:手机淘宝移动端布局 fl...

    siberiawolf 评论0 收藏0

发表评论

0条评论

mylxsw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<