阿里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的使用的更多相关文章

  1. vue 中使用阿里iconfont彩色图标

    在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...

  2. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

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

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

  4. vue安装openlayers,jquery,bootstrap,阿里iconfont，

    安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers ...

  5. 阿里iconfont引入方法

    原文:iconfont的引入方法   第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); ...

  6. uni-app引入阿里iconfont

    前言: 目前正在通过 UNI-APP平台开发移动应用,uni-app平台是去年年出才创建的一个新品台,因此资源相对比较匮乏,在此遇到一个问题,一直使用别人提供的iconfont,但总是不够用,为了解决 ...

  7. 阿里iconfont的使用

    1.找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中一个账号登陆一下就行了 假如你使用 ...

  8. 关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去    第二步: 在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选 ...

  9. uniapp如何使用阿里iconfont

    1.将iconfont中需要的图标,添加到购物车,然后添加到自己的项目.生成在线代码. 2.点击下载至本地.然后解压后复制 iconfont.css 文件到你的项目. 3.复制第一步生成的代码,替换i ...

随机推荐

  1. protobuf3的学习笔记

    学习protobuf的过程中踩了不少的坑,这篇博文算是一个小结吧! 环境: windows VisualStudio Google.Protobuf.Tools. Google.Protobuf. 其 ...

  2. leetcode-126-单词接龙

    题目描述: class Solution: def findLadders(self, beginWord: str, endWord: str, wordList: list) -> list ...

  3. 【NOI2019模拟2019.7.1】三格骨牌（轮廓线dp转杨图上钩子定理）

    Description \(n,m<=1e4,mod ~1e9+7\) 题解: 显然右边那个图形只有旋转90°和270°后才能放置. 先考虑一个暴力的轮廓线dp: 假设已经放了编号前i的骨牌,那 ...

  4. Python 空值和非空值

    1)任何值为0的值都是false,任何非0的值都是true if -0.0: print 'yes' #不打印yes if -0.1: print 'yes' #打印yes 2)任何为空的值都是fla ...

  5. 【Python】模拟登录上海西南某高校校园网 (jaccount)

    好久没写东西了,最近学习了一下模拟登录,以校园网为例,作一记录. 去年的时候写过一篇模拟登录的文章,用的是登录后的cookies,这种操作比较傻瓜,也不智能,不够自动化,本质还是手动登录. 这次我尝试 ...

  6. [JZOJ 5860] 荒诞

    思路: 头皮发麻的操作... 理解一下题意会发现:排名为\(i\)的前缀正好是第\(i\)个前缀. 所以问题就变成了求\(1->len\)的平方和,注意取模即可. #include <bi ...

  7. Unity中的值传递与引用传递

    1. 值类型 值类型变量本身保存了该类型的全部数据,当声明一个值类型的变量时,该变量会被分配到栈(Stack)上. 2. 引用类型 引用类型变量本身保存的是位于堆(Heap)上的该类型的实例的内存地址 ...

  8. flutter 超出俩行点点点

    Text( '${listItem["title"]}', overflow: TextOverflow.ellipsis, maxLines: 2, style: TextSty ...

  9. org.mybatis总是认不出来的原因，pom.xml中有

    idea打开maven project,然后就华丽丽的看见下载失败,怎么刷新都没有用. 请按以下步骤完成即可: https://blog.csdn.net/ZhengYanFeng1989/artic ...

  10. hexo next主题深度优化(三)，引入require.js,适配pjax。

    文章目录 require.js的好处, hexo next中加入require.js 新建一个main.js作为所有js的入口 pjax的require.js实现 关于require js适配过程中报 ...