【Django】关于使用阿里的iconfont
刚刚从看到课程里老师使用了阿里提供的矢量图标iconfont.cn
我记录一下基本步骤:
1.登录iconfont.cn,搜索图标
2.选中想要的icon点击添加入库,再从右上方点购物车,把icon添加到项目
3.进入到自己收藏的图标库(或者从图标管理--我的项目下找)
4.我收藏库里,选择font class方式(这种方式,图标是放在阿里云的),点击图标上那个更新代码,就生成了一条链接,
5.把这个链接引入到自己的html:
<link rel="stylesheet" href="//at.alicdn.com/t/font_808642_71zswkrgl9l.css">
6.html里用一个标签方这个图标,选中自己要的图标--复制代码,然后就可以把代码拷到自己那个html标签的class中
<i class="icon-person-fill iconfont"></i>
这里iconfont是自己添加的,注意这个名字不能写别的,一定是iconfont,因为我之前以为这个类型可以随便命名,结果发现图标无法显示的!!
然后在scss文件里就可以通过iconfont类来控制图标大小等样式
.iconfont{
font-size:30px; //注意icon大小就是用这个字体大小控制就可以了,不需要分别设置宽和高
color: white;
} 效果就如图:
这个东西可以说是非常方便了。其他引用方式可以参照官网上的使用帮助http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
【Django】关于使用阿里的iconfont的更多相关文章
- Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统
Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统 这个是写好的Django程序在本地机运行的情况,一个查询接口. 准备工作 1.首先购买一台阿里云的EC ...
- django之集成阿里云通信(发送手机短信验证码)
python3 + django2.0 集成 "阿里云通信" 服务: (SDK文档地址:https://help.aliyun.com/document_detail/55491. ...
- 微信小程序使用阿里图标-iconfont
步骤一:下载项目图标 步骤二:解压文件,重命名 iconfont.css为 iconfont.wxss ,并复制 到项目 static文件夹 icon文件夹下 ...
- 阿里云部署django实现公网访问
本博的主要目的是对阿里云部署django实现公网访问进行一次简单的记录,方便日后查询. 内容目录: (1)申请阿里云服务器及安全组配置 (2)实现ssh远程控制 (3)实现ftp文件传输 (4)安装p ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- django 通过MQTT连接阿里云
Django MQTT 连接阿里云 目录 Django MQTT 连接阿里云 目录 一.安装库 1.安装Python对接mqtt协议库,paho-mqtt 二. 设备认证,一机一密型接入 三.问题 1 ...
- 微信小程序本地引用iconfont(阿里巴巴矢量图标库)
好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...
- veu——引入iconfont图标
我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...
- CentOS7部署Django项目
1. 云服务器 这里使用的是腾讯云选择系统:CentOS7.3 记住云服务器登录密码 2. 配置Python3环境 默认Python环境为python2.7,yum安装是需要python2的环境的 安 ...
随机推荐
- CDH 安装遇到的问题
CDH 遇到的问题 l JAVA_HOME问题 这里, 很明显可以看到, JAVA_HOME 并没有设置成功.using as ... 感觉完全就是没有设置JAVA_HOME 这个环境变量.可是呢 ...
- IP与十进制相互转化
def ip2Long(ip: String): Long = { val fragments = ip.split("[.]") var ipNum = 0L for (i ...
- markdown的试用
因为markdown,我接触到latex,因为latex,我花了几个月去看相关的书籍 我看了以下相关的资料 1.<LaTeX入门> 刘海洋 2.英文 TeX - LaTeX Stack E ...
- template.js 数据渲染引擎
template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...
- django管理后台添加admin账号
直接用命令行添加即可:python manage.py createsuperuser # python manage.py createsuperuser Username (leave blank ...
- ACM__队列
今天学回顾bfs的时候遇到了,遂总结一下 队列是一种特殊的线性表,只允许在队列的前端(front)进行删除操作,在队尾进行插入操作,进行插入操作的端称作队尾,进行删除操作的端称作对头.(来自百度百科) ...
- 关于GC.Collect在不同机器上表现不一致问题
2019.1.17,昨天项目更新后策划反应: 游戏卡,表现为:每走几步就卡一下.前天还没有. 但在我本机测试中,却没有任何卡顿感. QC同学的机器也卡.我去看了下,打开Profiler,没开deep, ...
- Rust语言学习笔记(5)
Structs(结构体) struct User { username: String, email: String, sign_in_count: u64, active: bool, } let ...
- split()方法解析
split()方法用于将字符串分割为字符串数组. 废话不多说,直接贴代码: var str="How are you doing today?" console.log(str.s ...
- SQL Server 中BIT类型字段增删查改那点事
话说BIT类型字段之前,先看“诡异”的一幕,执行Update成功,但是查询出来的结果依然是1,而不是Update的2 当别人问起我来的时候,本人当时也是处于懵逼状态的,后面联想具体的业务突然想起来这个 ...