欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

阿里iconfont的使用

程序员文章站 2023-11-13 23:27:46
1.找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮，我这里添加了两个。 6.提示你登陆，不需要花钱，找其中一个账号登陆一下就行了 假如你使用微博登陆，点击以下新浪微博，扫一下二维码就登陆上了，或者使用用户名和密码登陆都可以 7.登陆成功之后 ......

1.找到阿里巴巴图标库

阿里iconfont的使用

2.找到图标

阿里iconfont的使用

3.搜索你想要的图标

阿里iconfont的使用

阿里iconfont的使用

阿里iconfont的使用

阿里iconfont的使用

4.将图标添加到购物车

阿里iconfont的使用

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

阿里iconfont的使用

阿里iconfont的使用

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

阿里iconfont的使用

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

阿里iconfont的使用

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

阿里iconfont的使用

阿里iconfont的使用

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

阿里iconfont的使用

9.下载解压以下

阿里iconfont的使用

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

阿里iconfont的使用

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

阿里iconfont的使用

12 使用

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

　　阿里iconfont的使用

<!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>

　　效果：

　　　　阿里iconfont的使用

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

　　阿里iconfont的使用

阿里iconfont的使用

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="&#xe62d;" class="iconfont">
    <input type="submit" value="&#xe611;" class="iconfont">
</div>



</body>
</html>

　　效果：

　　　　阿里iconfont的使用

ok，iconfont就使用到这里了。

上一篇： 又是a+b

下一篇： pytest中文文档--安装和入门

推荐阅读