阿里巴巴矢量图标库的使用

在参考小米官网写页面时,会发现小米中有很多的矢量图标,小米的图标或许是自己的,但是我们写页面时要用到矢量图标时怎么办,可以使用阿里提供的图标库

阿里矢量图标库网址:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a  注册一个账号就可以免费的使用了。

使用方法如下:

第二步

第三步

添加购物车

代码下载后会有一个如下的文件夹,复制到自己的项目中

下面简单的使用一下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 第一步引入 iconfont.css -->
        <link rel="stylesheet" type="text/css" href="font_fupby3jjl5e/iconfont.css"/>
    </head>
    <body>
        <span class="iconfont icon-sousuokuang" style="color: #0086B3;"></span>  <!-- 第一种 -->
        <span class="icon iconfont"></span>  <!-- 第二种 -->
        <!-- 第三种我没有使用过可以参考 demo_index.html 文件-->
    </body>
</html>

矢量图标就相当于文本一般,它可以使用文本的属性比如修改颜色,改变字体大小,字体居中等属性,所以在处理矢量图标时比图片更加的方便简洁。

个人学习,内容简略。

(0)

相关推荐

  • 阿里巴巴图标iconfont使用方法

    图标库有很多,例如: Font Awesome , bootstrap ,fontello等,阿里巴巴也提供了很强大的免费图标库:iconfont,下面就来介绍一下免费的使用方法. 1.登录阿里巴巴矢 ...

  • 小程序使用阿里巴巴图标库的方法

    选择购物车的里的字体图标库 点击阿里巴巴图标库的购物车,来到此页面,点击添加项目 项目添加过后如图,点击font class累引入,点击查看在线链接,复制链接url访问在线链接 访问链接过后,页面展示 ...

  • CSS伪元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  • 全新开源iconfont矢量图标库CSS.GG

    今天给大家推荐一款非常值得一用的开源矢量图标库CssGG. css.gg 又一款供设计和前端开发的工具图标库,star高达6.5K .拥有超过700 个矢量图标,可被用于.css|.svg|.tsx| ...

  • 2021年最值得收藏的11个图标素材库

    在设计过程中,每个设计师都绕不过"图标",好的图标库对设计师来说是非常难得的. 不同的图标库的特征和功能都不一样,就需要我们不断地筛选适合自己设计项目的图标库.今天,小憨给大家分享 ...

  • css:精灵图和字体图标(精灵图和icomoom字体图标的使用)

    css:精灵图和字体图标(精灵图和icomoom字体图标的使用)

  • CSS基础-03

    字体 文本颜色:color:red; 字体分类: 衬线字体serif --字体宽度各异,有衬线 --Times.Georgia.宋体 无衬线字体sans-serif --字体宽度各异,无衬线 --He ...

  • Chrome 开发者工具里的 CSS grid editor

    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一 ...

  • IconPark - 字节跳动出品的高质量免费图标库 

    转自: MicroUX 先来认识一下 IconPark出自字节跳动商业产品-CUX设计团队.联合技术同学一起打造的致力于解决研发和设计效率的图标工具.可以实现根据单一SVG源文件变换出多种主题, 具备 ...

  • 字节跳动开源,超过2000个图标的高质量图标库——IconPark

    介绍 IconPark是字节跳动团队开源的一个开源图标库,一共提供超过2000个高质量的图标,提供可视化界面配置来实现不同的方案,非常适合开发者和设计师来使用! Github GitHub:https ...

  • 五十个奥运矢量图标

    温馨提示:为了保证大家可以及时看见小轻松老师的推送,可将"轻轻松松学地理"设为星标(或者置顶)就可以第一时间看到小轻松老师的推送哦,看完如果能够给小轻松老师来个"赞&qu ...

  • reactnative 自定义项目的图标库

    前言: github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库. 首先明确一个点,你是否需要现成的第三方图标库? 优点:开箱即用,内容丰富 ...

  • Win7系统怎么更改库图标?

    使用过Win7系统的用户都会知道里面有个库文件夹,这个库文件夹是关闭不了的,但是如果你觉得它的图标难看,我们倒是可以修改一下.那么怎么更改库图标?如果你不知道的话,那么赶紧看看小编整理的Win7系统更 ...