码迷,mamicode.com
首页 > 其他好文 > 详细

阿里iconfont的使用

时间:2019-09-07 11:03:02      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:右上角   icon   文件夹   ima   col   char   dem   搜索   meta   

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



</body>
</html>

  效果:

    技术图片

ok,iconfont就使用到这里了。

阿里iconfont的使用

标签:右上角   icon   文件夹   ima   col   char   dem   搜索   meta   

原文地址:https://www.cnblogs.com/changxin7/p/11479216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!