首页 > 其他 > 详细

阿里iconfont的使用

时间:2019-09-07 10:35:53      阅读:124      评论:0      收藏:0      [点我收藏+]

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的使用

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!