CSS - Iconfont

使用步骤：

进入 https://www.iconfont.cn 登录，找到自己想要的图标，添加到购物车，支持多个，支持调好大小、颜色。

如果你只要一个图标的话，或者确保之后这个项目不需要其他的图标的话，可以直接选择下载代码，但是你有多个图标的话，最好选择添加至项目。

无论是添加项目还是直接下载代码，下载之后会有一个download.zip包，解压之后的文件如下图，前面四个文件就是官网的demo没有用的，后面五个才是有用的。

现在请把 iconfont.css 放在你常用的 css 文件目录下，iconfont.eot/svg/ttf/woff 这四个文件可以放在fonts文件下面（文件位置不重要）。但是注意css里面有引入这四个文件的地方，所以文件路径请注意。

如果你只是想使用标签引入小图标的话<i class='iconfont icon-xxx'></i>就行了，如果class里面少了iconfont，就会出现繁体字，所以一定要记住加iconfont。
如果要使用svg引入的话，那么就一定要引入iconfont.js文件了，这样子就可以任意的改变图标的样式了，比如颜色。

改变大小？

直接在.icon里面添加一个样式font-size就行了。

改变SVG的颜色？

svg是通过path里面的fill来改变颜色的，如果这个图标本身是没有颜色的，那么在.icon这个类里面把fill:red,就行了，但是如果这个图标原本就是有颜色的，那么这么改就起不到作用了，就要改iconfont.js里面的path，它是一个个对应下来的，只要改了fill里面的颜色，那么图标的颜色就对应的改了。

CSS - Iconfont相关推荐

如何把png/jpg文件生成为字体图标(css icon-font)
1. 将图片生成为svg文件用这个网站就可以生成: https://www.vectorizer.io/uploads/ svg 2. 将生成的svg文件生成为字体 https://icomoon. ...
CSS 背景图标（雪碧图、精灵图、iconfont）
目录雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
flutter显示图标_Flutter使用Iconfont图标
Iconfont 阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用 ...
前端学习（224）:iconfont矢量库
矢量库一.如何下载iconfont图标. 在iconfont-阿里巴巴矢量图标库中有多种图标供你选择.比如我们选择其中的一个作为示例. 鼠标悬浮上后会出现三种选择: 1.添加入库:功能和淘宝中的购物 ...
web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:电影网站设计--电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作文章 ...
怎么在小程序中使用彩色图标iconfont
怎么在小程序中使用彩色图标iconfont 国际惯例,先上图: 概要一般我们在开发的时候,都是采用 iconfont 来管理项目里的图标,方便快捷.但是当我需要将项目迁移的小程序的时候,就遇到了很多 ...
网页制作之HTML+CSS布局
CSS网页布局: 可以分为三种:1.固定布局 2.流动布局 (是百分百布局) 3.弹性布局(可用于移动APP开发) 元素基本样式: 1.行内样式:直接写在<body>部分的标签里面 < ...
html个人新闻网站，html，js，css实现
个人新闻网站,一个页面,五个部分新闻网html <!DOCTYPE html> <html><head><meta http-equiv="con ...
iconfont显示小方块
原代码: main.js: import 'src/assets/styles/iconfont/iconfont.css' header.vue: <span class="icon ...
踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...

CSS - Iconfont

使用步骤：

CSS - Iconfont相关推荐

最新文章

热门文章