一、什么是字体图标:

1. 字体图标可以和图片一样改变透明度,旋转度,等等

2.本质是文字,可以改变大小颜色等等比较适用于移动端

总结;图标字体具有矢量效果，放大缩小不失真，而且可以使用CSS任意更改图标字体的颜色,能够缩小源文件的体积，减少http的请求，提高页面的性能.

二、推荐的网站:

1. icomoon字库(icomoon.io)

2.阿里字库(http://iconfont.cn/)

三、如何使用(以icomoon为例)

1.进入网站,下载选定图标下载压缩包

2.解压.选取fonts文件夹,放入项目文件中

3.引入字体(之前解压文件style里有相关代码)

<style>

        @font-face {

        font-family: 'icomoon';

        src:  url('fonts/icomoon.eot?fkm9i6');/*注意url地址的准确性,有的需要改*/

        src:  url('fonts/icomoon.eot?fkm9i6#iefix') format('embedded-opentype'),

        url('fonts/icomoon.ttf?fkm9i6') format('truetype'),

        url('fonts/icomoon.woff?fkm9i6') format('woff'),

        url('fonts/icomoon.svg?fkm9i6#icomoon') format('svg');

        font-weight: normal;

        font-style: normal;

     }

</style>

4.声明字体,之前解压的文件夹里,打开demo文件,复制图标到html span标签里(显示的是一个长方体),然后写入样式

<body>

    <span></span>

</body>
span {

            font-family: "icomoon";/*需要和前面引入的名称一致*/

        }

浏览器打开效果,后面可以根据需求更改样式.

5.UI制作的字体图标如何引入impor icons,后续操作类似

6.如何追加(发现图标不够),通过第五步的impor icons 打开之前解压的文件selection.json ,确定,然后继续选择图标,替换掉原来的fonts即可.

CSS字体图标的更多相关文章

  1. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  2. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

  3. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  4. 007：CSS字体图标

    目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好 ...

  5. css - 字体图标的制作

    很多的时候我们在开发过程中一般都是直接使用图片,尤其在移动页面频繁请求图片对性能不是很好 ,所以图标字体的应用也越来越广泛.一般情况下直接用的是font awesome字体,但是有时候需要制作自己风格 ...

  6. css字体图标的制作

    我介绍的这个办法是直接在 "阿里巴巴图标库"中制作的,方便快捷 1. 首先到 "阿里巴巴图标库"中找到你想要的图片,然后选择加入购物车 接着我们点击右上角的购物 ...

  7. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  8. 字体图标转base64

    如果你在阿里矢量库下载了字体图标在项目引入无法显示时,可以把图标转成base64 在线转换的链接 https://transfonter.org/ css字体图标的制作

  9. h5-web字体和字体图标

    想要使用可以在: https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index :是we ...

随机推荐

  1. 协议——SCCB与IIC的区别

    SCCB(Serial Camera Control Bus,串行摄像头控制总线)是由OV(OmniVision的简称)公司定义和发展的三线式串行总线,该总线控制着摄像头大部分的功能,包括图像数据格式 ...

  2. caurina缓动类

    一.简单的缓动 一个实例名为box的正方体,开始alpha为0.5,在两秒内移动到x:300 y:100的位置,alpha变为1.import caurina.transitions.Tweener; ...

  3. python模块之openpyxl

    这是一个第三方库,可以处理xlsx格式的Excel文件.pip install openpyxl安装.如果使用Aanconda,应该自带了. 读取Excel文件 需要导入相关函数. from open ...

  4. git 学习笔记 ---安装

    Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 安装Git 在Linux上安装Git 首先,你可以试着输入git,看看系统有没有安装Git: $ git The progr ...

  5. 获取SpringMVC中所有RequestMapping映射URL信息

    SpringMVC启动的时候,会把接口信息收集在RequestMappingHandlerMapping中,故可以通过这个类,拿到全部的映射信息,Sample代码段如下: @Autowired pri ...

  6. js的for循环中出现异步函数，回调引用的循环值始终是最后的值

    一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { ...

  7. Sql 脚本文件太大 还原数据库

    sql脚本太大直接在数据库中执行会提示内存不足,我们看生成的脚本文件会发现每隔100条会有一个GO来分隔,这就好说了 在我将数据库的结构连同数据生成一个脚本文件db.sql 后,想在另外的电脑上恢复数 ...

  8. ASP.NET Core & 双因素验证2FA 实战经验分享

    必读 本文源码核心逻辑使用AspNetCore.Totp,为什么不使用AspNetCore.Totp而是使用源码封装后面将会说明. 为了防止不提供原网址的转载,特在这里加上原文链接: https:// ...

  9. js 删除 数组中某个元素（转载）

    来源:https://www.jb51.net/article/134312.htm js删除数组中某一项或几项的几种方法 https://www.jb51.net/article/154737.ht ...

  10. 【Redis】基本数据类型及命令操作(超详细)

    一.String 1.1 概述 1.2 相关命令列表 1.3 命令示例 二.List 2.1 概述: 2.2 相关命令列表: 2.3 命令示例: 2.4 链表结构的小技巧: 三.Hashes 3.1 ...