day 51 阿里iconfont的使用

阿里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就使用到这里了。
day 51 阿里iconfont的使用的更多相关文章
- vue 中使用阿里iconfont彩色图标
在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...
- 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的使用
1.找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中一个账号登陆一下就行了 假如你使用 ...
- 关于阿里 iconfont 的使用步骤
第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选 ...
- uniapp如何使用阿里iconfont
1.将iconfont中需要的图标,添加到购物车,然后添加到自己的项目.生成在线代码. 2.点击下载至本地.然后解压后复制 iconfont.css 文件到你的项目. 3.复制第一步生成的代码,替换i ...
随机推荐
- 发现一个新的远程软件 gotohttp
之前直到远程桌面连接是TeamViewer 替换的原因是: 被控制端版本 11.0.x (很久以前安装的),而我本地的Teamviewer是 14.x, 去连接,好像提示被控制端的版本太低:本地使用 ...
- d3操作svg路径动画,及dom移动
图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站htt ...
- uboot刷机
ath> tftp xx.zpk Trying eth0 Using eth0 device TFTP from server 192.168.1.104; our IP address is ...
- Java中volatile关键字及其作用是什么?
在 Java 多线程中如何保证线程的安全性?那我们可以使用 Synchronized 同步锁来给需要多个线程访问的代码块加锁以保证线程安全性.使用 synchronized 虽然可以解决多线程安全问题 ...
- delphi Treeview用法
Treeview用于显示按照树形结构进行组织的数据. Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...
- java script两个列表之间移动数据
<select name="b1" id="hao" style="width:100px; height:200px;" size= ...
- NX二次开发-UFUN工程图表格注释设置单元格首选项UF_TABNOT_set_cell_prefs
NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...
- 基于SPI的数据报过滤原理与实现
一.个人防火墙技术概述 随着网络安全问题日益严重,广大用户对网络安全产品也越来越关注.防火墙作为一种网络安全工具,早已受到大家的青睐.在PC机上使用的个人防火墙,很大程度上成为广大网民的安全保护者.W ...
- mysql中的Date日期格式的问题:只有日期没有时间及格式化时间
只有日期没有时间,把xml中的date改为timestamp 格式化最简单的方法:@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", time ...
- HDU1501-Zipper-字符串的dfs
Given three strings, you are to determine whether the third string can be formed by combining the ch ...