在项目中在线使用Iconfont图标
Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果。而且是国产的,网速会比较快,还可以改变图标颜色。
它提供svg、png、ai三种格式下载,之前我一直都是乖乖的一个个下载,最近才发现了新大陆,它竟然可以制作字体图标,简直不要太好用!后悔没有早点发现!
以下内容摘自官网:
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
具体详细步骤如下:
1、首先找到你需要的小图标,点击加入购物车

2、把所有的你需要的图标添加完后,点击添加至项目

没有项目的话新建一个

3、会自动进入我的项目,上边有一个查看在线链接的按钮,点击后可以看到

4、把这段代码复制进你的项目里(注意在前边加上http:)如下
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_q2w4393r9xr.css">

5、接下来就可以开心的使用了,在你需要图标的地方写入代码,复制你想要的图标代码粘贴进类名里(注意前边要加上icon iconfont类名)
还可以对图标进行修改


注意:项目图标增加或者编辑后要注意更新链接,并把更新后的链接添加进你的项目里!!
在项目中在线使用Iconfont图标的更多相关文章
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- 在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
- 【手把手教你Elmah】如何在MVC.NET项目中在线查看【错误日志】
一. 在NuGet下载Elmah.MVC dll文件! 或者点击下载dll文件,并且引用客户端. 二.配置WebConfig <sectionGroup name="elmah& ...
- 【react】---react项目中如何使用iconfont
一.路由配置 export const TabBarRouter = [ { path:"/home", icon:"\ue628", name:"首 ...
- iconfont 在项目中的简单使用
font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好,支持 ...
- mpvue小程序开发之 iconfont图标引入
背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...
- iconfont 怎么在项目中使用图标库
iconfont是很多设计以及前后端人员编写页面时经常用到的网站,阿里不仅为我们提供了免费的图标库,并且有一套完整的图标库体系.很多初学者只知道从图标库中下载图标放入项目中,但在实际项目应用中,过多的 ...
随机推荐
- 【Luogu P4779】dijkstra算法的堆优化
Luogu P4779 利用堆/优先队列快速取得权值最小的点. 在稠密图中的表现比SPFA要优秀. #include<iostream> #include<cstdio> #i ...
- 痞子衡嵌入式:恩智浦机器视觉模块OpenMV-RT那些事(1)- 初体验
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是机器视觉模块OpenMV-RT初体验. 近些年机器视觉应用一直是个很火的方向,想象一下机器如果能长上"眼睛",是不 ...
- Spring(Bean)6
生命周期构造 --->set--->Bean init前后执行 (新创建 类) public class MyBeanPostProcesser implements BeanPostPr ...
- MySQL Last_SQL_Errno: 1062----经典错误,主键冲突
一.基础信息 1. Centos7.4 2.MySQL 5.7.21 3.基于gtid的复制 二.异常描述 误把从节点当成主节点插入一条数据,同一条数据在主.从节点插入都进行了一次插入操作,导致主键冲 ...
- iptables规则备份和恢复、firewalld的9个zone、以及firewalld关于zone和service的操作 使用介绍
第7周第5次课(5月11日) 课程内容: 10.19 iptables规则备份和恢复10.20 firewalld的9个zone10.21 firewalld关于zone的操作10.22 firewa ...
- c 程序之 最大公约数 和 最小公倍数
1.最大公约数 30 10 -> 10 #include<stdio.h> /* 求最大公约数 辗转相减法 36 --16 4 */ int main(){ int a, ...
- Server MyEclipse Tomcat v7.0 was unable to start within 45 seconds. If the server requires more time
启动Tomcat服务器时经常遇到这个错误, Server MyEclipse Tomcat v7.0 was unable to start within 45 seconds. If the ser ...
- PyTorch官方教程中文版
首先呈上链接:http://pytorch123.com/ PyTorch是一个基于Torch的Python开源机器学习库,用于自然语言处理等应用程序.它主要由Facebookd的人工智能小组开发,不 ...
- Maven学习整理
1. window系统中安装Maven 2. 解决使用代理联网时无法下载jar包 3. 配置本地仓库 4. 处理本地仓库和中央仓库都没有依赖的jar包的情况
- [NACOS HTTP-GET] The maximum number of tolerable server reconnection errors has been reached
错误的意思是:已达到可容忍的服务器重连接错误的最大数目.有两个解决思路:一个将这个值设置的更大:然后是排查自己连接服务哪儿出了问题.先说在哪儿设置这个值:在拉取nacos服务的注解配置中,添加一个属性 ...