刚刚从看到课程里老师使用了阿里提供的矢量图标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的更多相关文章

  1. Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统

    Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统 这个是写好的Django程序在本地机运行的情况,一个查询接口. 准备工作 1.首先购买一台阿里云的EC ...

  2. django之集成阿里云通信(发送手机短信验证码)

    python3 + django2.0 集成 "阿里云通信" 服务: (SDK文档地址:https://help.aliyun.com/document_detail/55491. ...

  3. 微信小程序使用阿里图标-iconfont

    步骤一:下载项目图标 步骤二:解压文件,重命名 iconfont.css为 iconfont.wxss ,并复制 到项目 static文件夹 icon文件夹下                     ...

  4. 阿里云部署django实现公网访问

    本博的主要目的是对阿里云部署django实现公网访问进行一次简单的记录,方便日后查询. 内容目录: (1)申请阿里云服务器及安全组配置 (2)实现ssh远程控制 (3)实现ftp文件传输 (4)安装p ...

  5. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  6. django 通过MQTT连接阿里云

    Django MQTT 连接阿里云 目录 Django MQTT 连接阿里云 目录 一.安装库 1.安装Python对接mqtt协议库,paho-mqtt 二. 设备认证,一机一密型接入 三.问题 1 ...

  7. 微信小程序本地引用iconfont(阿里巴巴矢量图标库)

    好,忙,我懂..... 首先把图标放进项目里(废话): 接下来把这些图标下载到本地(这里不介绍网络途径了,下载就完事了) 然后利用一个网站将这个ttf文件转成base64文件https://trans ...

  8. veu——引入iconfont图标

    我这里是阿里的iconfont图标,如何下载请看下面这个博文 https://www.cnblogs.com/wangyang0210/articles/9248324.html 创建文件夹 在ass ...

  9. CentOS7部署Django项目

    1. 云服务器 这里使用的是腾讯云选择系统:CentOS7.3 记住云服务器登录密码 2. 配置Python3环境 默认Python环境为python2.7,yum安装是需要python2的环境的 安 ...

随机推荐

  1. 重识linux-linux系统服务相关

    重识linux-linux系统服务相关 1 tcp wrappers 特殊功能  应用级防火墙 2 系统开启的服务查看 top,ps 命令 3 查看系统启动的服务 1) 找到目前系统开启的网络服务 n ...

  2. Retrofit简介与使用方法(翻译)

    简介 Retrofit 是一个Square开发的类型安全的REST安卓客户端请求库.这个库为网络认证.API请求以及用OkHttp发送网络请求提供了强大的框架.Retrofit库让从web api下载 ...

  3. xml文件中的${}

    看到了${}这样的表达式,脑海里面第一印象是不是我们jsp中的EL表达式?! 哈哈... 不过,这个真不是EL表达式,Spring提供了自己的EL表达式,可是它的格式是#{} so.... ${key ...

  4. [转]J-Link Commander的妙用

    转自http://maker.zlgmcu.com/portal.php?mod=view&aid=3685 J-Link Commander作为J-Link驱动软件包的一个工具之一,为工程师 ...

  5. 微信小程序插件 - 开发教程

    昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现. 这篇文章,我将会带大家,从0开始,学习如何开发和使用插件. ...

  6. 如何禁用Firefox,chrome浏览器“不安全密码警告”

    在任何HTTP页面中,一个全新的“不安全密码警告”将会在用户点击表单时直接出现在登陆框的下方,强行保证所有用户都能看到“此链接不安全,你的个人利益将受到损害”等字眼,同时整个页面也会收到损坏的挂锁图标 ...

  7. CSS 点击事件

    :active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式. 这个伪类应用于处于激活状态的元素.最常见的例子就是在 HTML 文档中点击一个超链接:在鼠标按钮按下期间,这个链接是 ...

  8. Netty - 1

    Netty设计特点: 1. io线程模型 使用reactor模式,同步非阻塞.这决定了可以用最少的资源做更多的事. 2. 内存零拷贝 使用直接缓存 3. 内存池设计 申请的内存可以重用,主要指直接内存 ...

  9. Win7下npm命令Error: ENOENT问题解决

    Win7下在执行npm命令,比如npm list时出现下面错误:

  10. data型怎么转换格式

    data型如何转换格式01-1月   -03       如何转成   YYYY-MM-DD   的格式 本来就是date了 ------解决方案--------------------to_char ...