Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果。而且是国产的,网速会比较快,还可以改变图标颜色。

它提供svg、png、ai三种格式下载,之前我一直都是乖乖的一个个下载,最近才发现了新大陆,它竟然可以制作字体图标,简直不要太好用!后悔没有早点发现!

以下内容摘自官网:

font-class引用


font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

具体详细步骤如下:

1、首先找到你需要的小图标,点击加入购物车

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

没有项目的话新建一个

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

//at.alicdn.com/t/font_1518420_q2w4393r9xr.css这样一段代码

4、把这段代码复制进你的项目里(注意在前边加上http:)如下

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_q2w4393r9xr.css">

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

还可以对图标进行修改

注意:项目图标增加或者编辑后要注意更新链接,并把更新后的链接添加进你的项目里!!

在项目中在线使用Iconfont图标的更多相关文章

  1. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  2. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  3. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  4. 在项目中增加自定义icon图标

    以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...

  5. 【手把手教你Elmah】如何在MVC.NET项目中在线查看【错误日志】

     一.  在NuGet下载Elmah.MVC dll文件!  或者点击下载dll文件,并且引用客户端. 二.配置WebConfig <sectionGroup name="elmah& ...

  6. 【react】---react项目中如何使用iconfont

    一.路由配置 export const TabBarRouter = [ { path:"/home", icon:"\ue628", name:"首 ...

  7. iconfont 在项目中的简单使用

    font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好,支持 ...

  8. mpvue小程序开发之 iconfont图标引入

    背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...

  9. iconfont 怎么在项目中使用图标库

    iconfont是很多设计以及前后端人员编写页面时经常用到的网站,阿里不仅为我们提供了免费的图标库,并且有一套完整的图标库体系.很多初学者只知道从图标库中下载图标放入项目中,但在实际项目应用中,过多的 ...

随机推荐

  1. [ASP.NET Core 3框架揭秘] 配置[1]:读取配置数据[上篇]

    提到"配置"二字,我想绝大部分.NET开发人员脑海中会立即浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化 ...

  2. Maven安装目录分析

    maven目录结构介绍 bin: 包含了mvn运行的脚本(既在cmd输入命令执行依赖,在命令行输入任何一条mvn命令时,实际上就是在调用这些脚本) boot: 该目录只包含一个文件,是一个类加载器,m ...

  3. C # socket 实例

    同步客户端存储示例 下面的示例程序创建连接到服务器的客户端.             客户端使用一个同步套接字生成,因此,客户端应用程序的执行挂起,直到服务器返回响应.  应用程序将字符串发送到服务器 ...

  4. c# 窗体开发3 文件处理技术

    以字节形式向磁盘写入数据通常称为字节流(比特流) 常常使用System.Io 常用的类 类 说明 File 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. ...

  5. windows虚拟机中DNS服务配置

    在linux虚拟机中进行DNS服务配置并进行正向解析反向解析我博客中已经写过,下面 我来介绍一下在windows虚拟机中DNS服务的配置使用. 1.打开一台windows虚拟机中服务器管理器——角色— ...

  6. IDEA如何重置窗口布局

    如何重置窗口布局 我不知道怎么搞的,左边的,上边的,下边的,视图都没有了 , 重启了一下,然后重置为默认视图,就好了

  7. 第二章 Unity Shader基础

    [TOC] 1. Unity Shader 的基础: ShaderLab 学习和编写着色器的过程一直是一个学习曲线很陡峭的过程,通常情况下为了自定义渲染效果往往要和很多文件和设置打交道,这些设置很容易 ...

  8. Java分割面板和选项卡面板的应用

    1.分割面板 JSplitPane类的常用构造方法 构造方法 说明 JSplitPane() 创建一个默认的分割面板.默认情况下为在水平方向上分割,重绘方式为只在调整分隔条位置完成时重绘 JSplit ...

  9. 华为担纲建设基础软硬件国家新一代AI开放创新平台

    [摘要] 全栈全场景AI能力爆发! [上海,2019年8月29日] 凭借领先的全栈全场景AI能力华为入选国家新一代人工智能开放创新平台 8月29日,科技部在2019世界人工智能大会宣布,将依托华为建设 ...

  10. Python自带又好用的代码调试工具Pdb学习笔记

    返璞归真 这几天项目有一个linux下部署数据库的操作,数据库使用python进行初始化安装.然后问题来了,由于linux服务器涉及安全要求,除了代码以来的Python3.6版本外不允许安装其他插件与 ...