阿里iconfont的使用
1.找到阿里巴巴图标库

2.找到图标

3.搜索你想要的图标




4.将图标添加到购物车

5.点击右上角的购物车按钮,我这里添加了两个。


6.提示你登陆,不需要花钱,找其中一个账号登陆一下就行了

假如你使用微博登陆,点击以下新浪微博,扫一下二维码就登陆上了,或者使用用户名和密码登陆都可以

7.登陆成功之后,网站会提示你是否同意登陆,点击同意就可以了


8.然后回来接着点击购物车,下载代码:

9.下载解压以下

10.打开加压的文件夹,看一下文件

11.我们打开第一个demo来看看怎么使用

12 使用
首先将这些文件copy到你的目录下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font_2k0jqnfvsoy/iconfont.css">
</head>
<body>
<div>
<i class="iconfont icon-search" style="color:green;font-size:20px;"></i> <!--必须使用i标签,class里面必须写iconfont,设置图标大小和颜色都和文字的设置是一样的-->
</div>
</body>
</html>
效果:

13 如果你是在input标签里面通过value属性来使用的话,要看另外一个demo


14. input标签中使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font_2k0jqnfvsoy/iconfont.css">
</head>
<body>
<div> <!--value="unicode代码",class里面必须有iconfont这个值,上面必须引入css文件-->
<input type="submit" value="" class="iconfont">
<input type="submit" value="" class="iconfont">
</div>
</body>
</html>
效果:

ok,iconfont就使用到这里了。
阿里iconfont的使用的更多相关文章
- vue 中使用阿里iconfont彩色图标
在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...
- day 51 阿里iconfont的使用
阿里iconfont的使用 1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...
- Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue安装openlayers,jquery,bootstrap,阿里iconfont,
安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...
- 阿里iconfont引入方法
原文:iconfont的引入方法 第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); ...
- uni-app引入阿里iconfont
前言: 目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决 ...
- 关于阿里 iconfont 的使用步骤
第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选 ...
- uniapp如何使用阿里iconfont
1.将iconfont中需要的图标,添加到购物车,然后添加到自己的项目.生成在线代码. 2.点击下载至本地.然后解压后复制 iconfont.css 文件到你的项目. 3.复制第一步生成的代码,替换i ...
随机推荐
- APM环境搭建
权限设置 把用户添加到用户组 “dialout”(如果这步没做,会导致很多用户权限问题): sudo usermod -a -G dialout $USER 然后注销后,重新登录,因为重新登录后所 ...
- Linux 使用 docker 下搭建xunsearch 搜索引擎服务
Linux 使用 docker 下搭建 xunsearch 搜索引擎服务 安装 docker 环境(菜鸟教程有说明) 安装docker说明 下载并运行 xunsearch 的服务端:docker安装x ...
- C++ 关键字之override
非原创,转载自stackoverflow 确切的说override并非一个keyword The override keyword serves two purposes: It shows the ...
- MyCat学习 ------分库分表 随笔
垂直切分.水平切分 1.垂直分库,解决库中表太多的问题. 2.垂直分表,解决表中列太多的问题.例如 商品表 包含 产地.二维码 .时间.价格.各个列.分为不同的小表. 水平切分, 大数据表拆分为小表 ...
- Sring+mybatis模拟银行转账
实体类: package com.bjsxt.pojo; import java.io.Serializable; public class Account implements Serializab ...
- [TimLinux] MySQL 入门指导
1. 说明 本部分内容参考MySQL参考手册第三章:Chapter 3 Tutorial. 2. 版本 下载安装:https://dev.mysql.com/get/Downloads/MySQL-5 ...
- Codeforces-501b
Misha hacked the Codeforces site. Then he decided to let all the users change their handles. A user ...
- Python网络爬虫入门实战(爬取最近7天的天气以及最高/最低气温)
_ 前言 本文文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Bo_wen 最近两天学习了一下python,并自己写了一个 ...
- .net core 如何正确的读取body中的内容
private string BodyToJson() { var reader = new StreamReader(Request.Body); var contentFromBody = rea ...
- JavaScript 逻辑与(&&) 与 逻辑或(||) 运算规则
逻辑与(&&) 逻辑与(&&)操作可以应用于任何的操作类型,不仅仅是布尔值, 在有一个操作数不是布尔值的情况下,&&操作符就不一定返回布尔值:遵循下面规 ...