IconFont 图标制作和使用

时间:2021-02-10 03:44:34

一、制作:IcoMoon

这个教程一搜一大把,是很方便快捷的一种方式,提供上传、编辑或者选择IcoMoon-Free下载可以直接拿来用了。 
网址:https://icomoon.io/app/

上传需要制作成iconfont的svg图片,点击import iconts--generate font--download

二、使用方法

使用步骤如下:

第一步:引入项目下面生成的fontclass代码:

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步:在fonts文件夹引入font字体文件

例如icomoon.ttf

第三步:挑选相应图标并获取类名,应用于页面:

<i class="iconfont icon-xxx"></i>

IconFont 图标制作和使用的更多相关文章

  1. 00字体图标iconfont的制作与使用--阿里矢量图库

    一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...

  2. icon-font图标介绍

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

  3. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  4. 如何引入iconfont图标与Element-UI组件

    一.iconfont图标 iconfont方便又好用,介绍一下如何在vue项目中引入iconfont 1.进入iconfont官网 www.iconfont.cn 2.登录自己账户 3.选择图标后下载 ...

  5. 使用iconfont图标

    iconfont.cn基本使用 登录iconfont.cn网站,直接使用github账号即可登录 输入关键字搜索需要的图标,然后在需要的图标上点击'添加入库' 点击网站右上角的购物车图标,查看当前已入 ...

  6. veu——引入iconfont图标

    我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...

  7. 在线图标制作,格式转换 ICON

    在线图标制作,格式转换 https://www.easyicon.net/covert/

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

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

  9. JMeter快捷键图标制作 去掉cmd命令窗口

    使用jmeter时: 如果使用默认的jmeter.bat启动的话,会出现一个CMD命令窗口之后再会启动jmeter工作界面 直接启用ApacheJMeter.jar文件即可跳过CMD命令窗口启动jme ...

随机推荐

  1. ArcGIS AddIN开发之自定义鼠标样式

    如果想修改Windows默认的鼠标样式,可以这样 //设置鼠标样式 this.Cursor = System.Windows.Forms.Cursors.Cross; 可是如果想设置成一些自定义的很好 ...

  2. LA 3704 &lpar;矩阵快速幂 循环矩阵&rpar; Cellular Automaton

    将这n个格子看做一个向量,每次操作都是一次线性组合,即vn+1 = Avn,所求答案为Akv0 A是一个n*n的矩阵,比如当n=5,d=1的时候: 不难发现,A是个循环矩阵,也就是将某一行所有元素统一 ...

  3. 【网络流24题】No&period;18 分配问题 (二分图最佳匹配 费用流&vert;KM)

    [题意] 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为 cij . 试设计一个将n 件工作分配给 n 个人做的分配方案, 使产生的总效益最大. 输入文件示例input. ...

  4. 最近比较迷flash professional cc 做PPT,做一个flash做动态打字效果的教程

    想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...

  5. Sigmoid函数

    Sigmoid函数是一个S型函数. Sigmoid函数的数学公式为: 它是常微分方程 的一个解. Sigmoid函数具有如下基本性质: 定义域为 值域为, 为有界函数 函数在定义域内为连续和光滑函数 ...

  6. 7——ThinkPhp中的响应和重定向:

    public function index3(){ //响应数据: $data=['title'=>"标题部分","content"=>" ...

  7. spring cloud config服务器

    Spring Cloud Config提供了一种在分布式系统中外部化配置服务器和客户端的支持.配置服务器有一个中心位置,管理所有环境下的应用的外部属性.客户端和服务器映射到相同Spring Event ...

  8. SQLException&colon; com&period;mchange&period;v2&period;c3p0&period;ComboPooledDataSource &lbrack; java&period;beans&period;IntrospectionException&colon; java&period;lang&period;reflect&period;InvocationTargetException &lbrack;numThreadsAwaitingCheckoutDefaultUser&rsqb; &rsqb; has been closed&lpar;&rpar;

    问题:Could not get JDBC Connection; nested exception is java.sql.SQLException: com.mchange.v2.c3p0.Com ...

  9. Maven 多套环境配置

    在Java开发中会配置不同环境,可通过Maven的profile指定不同的环境配置,pom.xml配置如下: <project xmlns="http://maven.apache.o ...

  10. Solve Equations HackerRank 扩展欧几里德 &amp&semi;&amp&semi; 数学

    https://www.hackerrank.com/contests/infinitum16-firsttimer/challenges/solve-equations 给定一条方程a*x + b* ...