保姆教你用iconfont

文章目录

为什么要写
开干
- Unicode 方式
- Font class 方式
- Symbol 方式
总结

为什么要写

突然想做一个前端的项目，但是不想用 bootstrap。

突然想起阿里巴巴矢量图标库（好像嘿久之前用过一样诶。。。）。

突然搞忘囊个用唠。

查看官网帮助，我脑壳短路唠。

百度查找实例，全是官网帮助（我日嘛，让我看哈子完整代码噻。。。）。

然后我自己慢慢思考嘛。过了一分钟——诶，我行了诶。

开干

进到官网首页点我送你走
找一组图标（截图不喔？截一个嘛，怕莫二回又搞忘唠？）

为了方便管理，我们加入购物车。（都写了是仓库的嘛，还购物车？）
当然也可以直接下载。（因为我不想下载，所以有了这篇文章）

发现仓库有东西了诶。（这张图有存在的必要咩？算球，截都截了。）

加入项目

当然，也可以直接下载素材或者者代码哈。
但是我没有这样做。（诶？我没啥子没有这样做诶？？？）
可能是我觉得加入项目便于管理哟。

Unicode 方式

下面直接点击下载至本地
是第一行那个大按钮哈，莫按错了。至于图标上的下载按钮嘛。大家可以告一哈。

下载解压，得此文件夹，将所需文件加入项目。

按照实际情况修改 iconfont.css 中的路径即可。

看哈代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../static/css/iconfont.css"><link rel="stylesheet" href="../static/css/bootstrap.min.css">
</head>
<body>
<div class="container"style="background-color: lightpink"><i class="iconfont">&#xe61b;</i><i class="iconfont">&#xe61c;</i><i class="iconfont">&#xe61d;</i><i class="iconfont">&#xe61e;</i>
</div>
</body>
</html>

看哈子演示
图标莫得颜色是正常的，因为列种方式不支持颜色。

今有一好事者（恐怕就是我了），仔细看了看我下载的所谓的　iconfont.css
我就说这个代码我见过的嘛——官网帮助。点我送你走
我直接生成代码，再复制 iconfont 类的样式代码。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../static/css/myicon.css"><link rel="stylesheet" href="../static/css/bootstrap.min.css">
</head>
<body>
<div class="container"style="background-color: lightpink"><i class="iconfont">&#xe61b;</i><i class="iconfont">&#xe61c;</i><i class="iconfont">&#xe61d;</i><i class="iconfont">&#xe61e;</i>
</div>
</body>
</html>

@font-face {font-family: 'iconfont';  /* project id 2185259 */src: url('//at.alicdn.com/t/font_2185259_mojay5b33e.eot');src: url('//at.alicdn.com/t/font_2185259_mojay5b33e.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2185259_mojay5b33e.woff2') format('woff2'),url('//at.alicdn.com/t/font_2185259_mojay5b33e.woff') format('woff'),url('//at.alicdn.com/t/font_2185259_mojay5b33e.ttf') format('truetype'),url('//at.alicdn.com/t/font_2185259_mojay5b33e.svg#iconfont') format('svg');
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;
}

Font class 方式

这个地方生成的代码就比较简洁了，直接在html中引入就是。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../static/css/bootstrap.min.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_2185259_mojay5b33e.css">
</head>
<body>
<div class="container"style="background-color: lightpink"><i class="iconfont icon-lvyouchuhang"></i><i class="iconfont icon-qian"></i><i class="iconfont icon-shangwuhezuo"></i><i class="iconfont icon-jiaoyisuo"></i>
</div>
</body>
</html>

至于说要下载到本地诶，也阔以。方法都差不多。
不赘述唠。

Symbol 方式

这种方式较前一种就比较麻烦了——自有其好处。
显然这是生成了一个 js

代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>test</title><link rel="stylesheet" href="../static/css/bootstrap.min.css"><link rel="stylesheet" href="../static/css/myicon.css">
</head>
<body>
<div class="container"style="background-color: cadetblue;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-lvyouchuhang"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qian"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangwuhezuo"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiaoyisuo"></use></svg>
</div>
</body>
<script src="//at.alicdn.com/t/font_2185259_mojay5b33e.js"></script>
</html>

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}

演示

总结

我也不晓得写了些啥子废话。所以莫得总结。
写了这么多，二回总不得忘了。

保姆教你用iconfont相关推荐

手把手教你引入iconfont图标字体（方法一）
一 unicode 打开iconfont网站:iconfont-阿里巴巴矢量图标库挑选想要的图标,加入购物车: 全部挑选完后,点击购物车: 将购物车中的图标加入到项目中: 全部挑选完后,点击购物车: ...
手把手教你引入iconfont字体图标（方法二）
二 font class 打开iconfont网站:iconfont-阿里巴巴矢量图标库挑选想要的图标,加入购物车: 全部挑选完后,点击购物车: 将购物车中的图标加入到项目中: 将其添加至项目后,点 ...
《保姆教程一》Idea 必装插件，墙裂推荐！！！
目录一.插件安装 1.1 在线安装 1.2 离线安装二.必装的插件 2.1 GrepConsole 2.2.Lombok
Python气象绘图之Cartopy
前言因为参加大创项目需要,开始学习使用Python绘制图片.此前 Python 最常用的地图包是 Basemap,然而它将于 2020 年被弃用,官方推荐使用 Cartopy 包作为替代.Carto ...
3Dmax专用快捷键大全（保姆式手把手教）
大家好!小编是搬运工:基础建模大家一定很苦恼!一些基础命令该按哪个键?挤出插入的快捷键又是什么? 到了脑海里,到了嘴边就是想不出来,就是说不出来,非常烦躁. 那么今天就帮你摆脱这个烦恼,保姆式手把手 ...
保姆级教程：手把手教你搭建个人网站
保姆级教程:手把手教你搭建个人网站前言准备与搭建 1.Git管理工具的下载与安装 2.nodejs环境安装 3.hexo博客框架下载 npm换国内源使用npm下载hexo博客框架初始化mybl ...
【Midjourney实操】逼真到颤抖！保姆级教程教生成效果炸裂的图片
最近,许多由Midjourney V5创作的画作在网络上引起了热议,许多人惊呼:人类画师, 插画师, 设计师统统活不下去了! 比如下面这张中国情侣的画作: 因为前段时间这个很火, 我跟着同样的prom ...
万字长文保姆级教你制作自己的多功能QQ机器人
转载请注明出处:小锋学长生活大爆炸(https://xfxuezhang.blog.csdn.net/) 若发现存在部分图片缺失,可以访问原文:万字长文保姆级教你制作自己的多功能QQ机器人 - 小锋学 ...
matlab按图像边缘抠图_不会抠图？保姆级抠图教程！手把手教你抠图（一）
本篇教程由浅入深的了解ps当中的每一个抠图工具以及原理,帮助大家提升工作效率的同时,还能打破很多同学对抠图的一些刻板印象. 抠图是我们几乎每一天都能接触到的工作,说到最好用的抠图工具,有的同学觉得是魔 ...

保姆教你用iconfont

文章目录

为什么要写

开干

Unicode 方式

Font class 方式

Symbol 方式

总结

保姆教你用iconfont相关推荐

最新文章

热门文章