码迷,mamicode.com
首页 > Web开发 > 详细

reactjs 项目使用 iconfont 小图标

时间:2019-07-11 23:18:02      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:pre   css   完成   本地   完成后   reactjs   alt   amp   部分   

在 reactjs 项目中是所有小图标目前主要分为两类使用方式,第一类通过 CSS 引入的方式使用,第二类使用 JS 的方式引入使用。

  1. 注册-登录-建立项目-选中图标添加到购物车-添加至项目-下载到本地,当然亦能上传制作的自定义小图标。下面正式代码部分。

下载到本地解压后有如下几个文件:
技术图片

其中第一种 CSS 引入使用的方案需要的文件如下图红线标记:
技术图片

在如上图中找到 iconfont.css 打开后更改路径(一般如图中所示)在红线标记的位置:
技术图片

修改完成后保存,一般会项目入口的 CSS 文件中引入这个 CSS 文件,依照自己的文件路径(例子里放在 static 目录下,注意末尾有分号):

@import './static/iconfont/iconfont.css';

之后则在页面中直接书写:

<span class="iconfont">&#x33;</span>

reactjs 项目使用 iconfont 小图标

标签:pre   css   完成   本地   完成后   reactjs   alt   amp   部分   

原文地址:https://www.cnblogs.com/zhourongcode/p/11173390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!