reactjs 项目使用 iconfont 小图标

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

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

下载到本地解压后有如下几个文件:

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

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

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

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

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

<span class="iconfont">3</span>

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

时间: 2024-10-10 10:06:17

reactjs 项目使用 iconfont 小图标的相关文章

如何制作icon-font小图标

1.首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式). 2.打开iconmoon这个网站(这个样子的),然后点击右上角那个Iconfont App如下图: 3.上面有一个紫色的 Import Icons 点击上传你下好的 SVG 图标. 4.上传好的 SVG 图标会显示在下方的 Untitled Set 中,然后选择上方有个类似 笔 形状的图标,点击进入编辑.解释一下上面的选择器..鼠标箭头 表示 选择图标 .垃圾桶 表示 删除图标 ,一般选择垃圾桶,

小程序入坑(一)---如何引入iconfont 字体图标

最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的"懒癌","不思进取"给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.com/debug/wxadoc/dev/,,点击 导航栏里的"工具"->点击"微信开发者工具",如图: 进入下载开发工具页面,然后根据自己的电脑配置选择相应的压缩包. 二.创建一个自己的项目 1.安装好"微信开发工

iconfont阿里妈妈前端小图标使用方法详解

图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3.样式表里面引入以下内容(../font 这个是根据相对路径做出相应的选择) @font-face {font-family: 'iconfont';     src: url('../font/iconfont.eot'); /* IE9*/     src: url('../font/iconfo

总结几个小图标实现方法

前言:页面总是时不时会出现小图标,就来总结一些自己知道的实现方法,应用情况依靠场景大家自行参考吧. (一)雪碧图 CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 特点:相对于单个小图标,它节省了文件体积和服务请求次数.主要是因为将所有的零碎的小图片整合在一起,可以有效的减少http对图片的请求次数,不需要多次加载零碎的背景图片,所以合理的利用它可以有效的提高网页的加

列表前显示的小图标

列表信息展示有时候会在每行前使用小图标来美化,布局通常也会用到ul li: 1.如果是1张小图标 一般会用background属性来显示图标,background-image:url(); background-repeat: no-repeat; background-position:left center; 另外还可以使用list-style,该属性按顺序有3个值:list-style-type, list-style-position, list-style-image list-sty

bootstrap的小图标

bootstrapt的小图标 关于bootstrap的<i>小图标,需要几个要素.<i class="icon-search"></i>形式第一个,bootstrap.min.css第二个,就是 font-awesome.css  这个东西,它是控制小图标的.第四个!!就是!image!!没有image,就只会出现一个小框框.最重要的是fontawesome-webfont.ttf就这一个.only.这就是这两天来不死不活的成果.这几天效率低下,没有

两套Ext小图标(含CSS样式文件)--约2000个图标

在Ext项目开发中经常用到16X16 的小图标,今天为大家准备被了两套完美的图标和样式,各大概包含2000个图标. 下载地址:http://files.cnblogs.com/zhougaojun/Ext%E5%B0%8F%E5%9B%BE%E6%A0%87.zip 部分图标效果: (1)第一套图标样式 (2)第二套图标样式 两套Ext小图标(含CSS样式文件)--约2000个图标,布布扣,bubuko.com

iconfont阿里巴巴图标的使用

第一步 使用github(用户名:hujiaoyue123,密码:Lov...04)登录http://iconfont.cn/home/index?spm=a313x.7781069.1998910419.1.19019531AIoim9 第二步 图标管理>我的项目>新建项目 第三步 图标库>添加入库>右上角购物车添加至项目 第四步 查看在线链接>点击复制代码 @font-face { font-family: 'iconfont'; /* project id 385153

iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点