目录
前言
公司UI美工的小姐姐没有上传字体图标怎么办?! 那就自己动手吧  ̄▽ ̄
一、下载
首先是找到免费的网站去下载,当然是www.iconfont.cn 里面随便找,不过要先注册emmm
- 登录(新浪微博) → 选择图标 ,加入购物车 → 添加至项目 → 下载到本地
- 下载之后,点开文件中的网页也是自带的引入方法
二、使用方法
新建fonts文件,将下载的其中四个文件放入,方便外联
引入代码:
<link rel="stylesheet" href="./fonts/iconfont.css">
方法1:使用2个类名引入字体图标
- 第一个类名iconfont 目的是告诉这是字体图标.不是普通的文字
- 第二个类名是字体图标自带的,用来告诉使用哪个小图标
- 代码如下
<style>
.icon-icon-test1 {
color: red;
font-size: 60px;
}
</style>
<body>
<i class="iconfont icon-icon-test1" > </i>
</body>
方法2:使用unicode
编码
- 直接标签放入编码
- html代码:
<i class="iconfont">  </i>
- css代码:
.iconfont {
fontsize:30px;
color:red;
}
方法3:使用伪元素字体图标
- 保留
unicode
编码后四位,前面所有编码用 \ 代替
- css代码如下
div {
font-family: 'iconfont';
}
div::after {
content: "\e63b";
}
注意: 使用伪元素字体图标,一定要声明字体。 font-family: 'iconfont'
方法4:使用在线字体图标
- 在阿里字体图标网页中查看在线链接
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3276121_9b9eepa4f57.css">
<!-- 标签装字体 -->
<i class="iconfont icon-xxx"></i>
- 复制链接引入时,记得手动添加http: 或者https
好了就这里结束了,下次摸鱼再来分享