矢量图标的使用以及美团左侧边栏练习

矢量图标可以从阿里巴巴矢量图标库中查找： iconfont 阿里巴巴矢量图标库

一，首先我们要先注册一个账号

二，进入网站主页：资源管理—>我的项目—>点击加号新建项目。

三，在搜索框中输入想要的图标名称，例如：购物车，找到喜欢的购物车图标，点击添加入库，然后添加到项目。

四、在head中导入iconfont.css文件。官网有三种方法，在导入包后三种方法都可以用。

 <!-- 本地引入文件 --><link rel="stylesheet" href="./font_3311895_f50jxqeizt9/iconfont.css"><!-- 第一种使用 --><i class="iconfont icon-gouwucheman"></i><span class="iconfont icon-dingweixiao"></span><!-- 第二种使用 --><i class="iconfont "> &#xe73d;</i><!-- 第三种方式 --><p>定位图表</p>

具体步骤如下：

第一步：拷贝项目下面生成的font-face
/* 注：官网里的url没有 http:// 在代码里都得加上 */
@font-face {   font-family: 'iconfont';src: url('http://iconfont.eot');src: url('http://iconfont.eot?#iefix') format('embedded-opentype'),url('http://iconfont.woff') format('woff'),url('http://iconfont.ttf') format('truetype'),url('http://iconfont.svg#iconfont') format('svg');
}
第二步：定义使用iconfont的样式
/* 要修改这个的样式得把引入的iconfont.css包放在自己的css文件上面 */
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"></i>

或者，在我的项目中，选择保存图标的项目，然后下载到本地。解压下载的文件夹。

首先给解压的文件夹重命名为(为了方便)：font
里面有一个demo_index.html：这个网页是教我们如何使用这些图标
我们使用Font Class的形式，应用于页面。
例如： <span class="iconfont icon-xxx"></span>

本侧边栏主要是练习字体图标的引入。

练习：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./font_3313904_hi2g9p1zm1j/iconfont.css"><title>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}a {text-decoration: none;color: #646464;}#aside {height: 525px;width: 230px;margin: 50px auto;border: 1px #ccc solid;/* background-color: pink; */}h3 {padding: 17px 0 10px 15px;}ul {font-size: 16px;}li {padding: 5px 0;padding-left: 15px;}li a {padding-left: 6px;}p {display: inline-block;padding: 2px 4px;background-color: rgb(231, 229, 111);border-radius: 35%;font-size: 12px;}i {color: #ccc;float: right;margin-right: 12px;}li:hover {background-color: rgb(231, 184, 81);}</style>
</head><body><div id="aside"><h3>全部分类</h3><ul><li><span class="iconfont" style="color:orange; font-size: 12px;">&#xe8f8;</span><a href="#">美食</a><i>&gt;</i></li><li><span class="iconfont" style="color: yellow;">&#xf564;</span><a href="#">外卖</a><i>&gt;</i></li><li><span class="iconfont" style="color: brown;">&#xe603;</span><a href="#">酒店<p>HOT</p></a><i>&gt;</i></li><li><span class="iconfont" style="color: yellow;">&#xe606;</span><a href="#">民宿</a><i>&gt;</i></li><li><span class="iconfont" style="color: red;">&#xe60e;</span><a href="#">猫眼电影</a><i>&gt;</i></li><li><span class="iconfont" style="color:green">&#xe600;</span><a href="#">休闲娱乐/KTV</a><i>&gt;</i></li><li><span class="iconfont" style="color: green;">&#xe783;</span><a href="#">生活服务</a><i>&gt;</i></li><li><span class="iconfont" style="color: rgb(209, 28, 155);">&#xe610;</span><i>&gt;</i><a href="#">丽人/美发/医学美容</a></li><li><span class="iconfont" style="color: rgb(209, 28, 155);">&#xeaee;</span><a href="#">结婚/婚纱摄影/婚宴</a><i>&gt;</i></li><li><span class="iconfont" style="color: rgb(209, 28, 155);">&#xfef4;</span><a href="#">亲子/儿童乐园/幼教</a><i>&gt;</i></li><li><span class="iconfont" style="color: blue;">&#xe605;</span><a href="#">运动健身/健身中心</a><i>&gt;</i></li><li><span class="iconfont" style="color: green;">&#xe62b;</span><a href="#">家装/建材/家居</a><i>&gt;</i></li><li><span class="iconfont" style="color: green;">&#xe607;</span><a href="#">学习培训/音乐培训</a><i>&gt;</i></li><li><span class="iconfont" style="color: blue;">&#xe630;</span><a href="#">医疗健康/宠物/爱车</a><i>&gt;</i></li><li><span class="iconfont" style="color: green;">&#xe825;</span><a href="#">酒吧/密室逃脱</a><i>&gt;</i></li></ul></div>
</body></html>

效果图：

矢量图标的使用以及美团左侧边栏练习相关推荐

html 两个idv上下居中,Django搭建个人博客：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏...
本章集中介绍四个重要的小功能:回到顶部浮动按钮.矢量图标.页脚沉底和粘性侧边栏. 这几个功能与Django基本没啥关系,更多的是前端知识,但是对博客网站都很重要,问的读者也比较多,因此也集中讲一下好了 ...
day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文阿里矢量图标 day0 ...
自己摸索阿里矢量图标iconfont的用法之阿里图标怎么用（最简单）（多图预警）
话不多说,直接先上干货. 第一部分:阿里图标iconfont怎么用. 1,登录阿里图标官网 https://www.iconfont.cn/ 2,登录. 没号可以先注册.用微博或者GitHub登录的. ...
web 阿里矢量图标
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...
插入网络CSS矢量图标、网络SVG矢量图标
 <link rel="stylesheet" href="https://use.fontawesome.com/re ...
zatree插件优化：优化左侧边栏
zatree是监控软件zabbix的一个插件,主要功能是提供host group的树形展示和在item里指定关键字查询及数据排序. zatree项目地址https://github.com/spide ...
Captain Icon – 350+ 有趣的矢量图标免费下载
Captain Icon 是一套一个惊人的免费图标集,包含350+有趣的矢量图标,可以缩放到任意大小而不会降低质量.图标的类别很丰富,有设计,体育,社会,天气等很多类别.提供 EPS.PSD.PNG. ...
阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
超棒的阿里巴巴矢量图标库——支持IE6
Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台.网站涵盖了1000多个常用图标并还在持续更新中,Iconfont平台为用户提供在线图 ...

矢量图标的使用以及美团左侧边栏练习

矢量图标的使用以及美团左侧边栏练习相关推荐

最新文章

热门文章