做网页时常常需要用到一些标志性的小图标
可以通过放置小图标的图片来实现,但也可以通过使用矢量图标来做,使用矢量图标的好处是,可以在放大时保持清晰度。
做法
这里以阿里巴巴矢量图标库为例,打开网址www.iconfont.cn
搜索你需要用到的图标,将他们放入购物车
添加进项目中
到该项目中,选择下载到本地,并放入项目目录
下载解压后,可以通过打开demo_index.html文件查看使用说明
在需要用到矢量图标的网页的style文件中,添加字体,注意选择对应文件路径
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont/iconfont.eot');
src: url('../font/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont/iconfont.woff2') format('woff2'),
url('../font/iconfont/iconfont.woff') format('woff'),
url('../font/iconfont/iconfont.ttf') format('truetype'),
url('../font/iconfont/iconfont.svg#iconfont') format('svg');
}
然后添加iconfont类属性
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
最后在html文件中,给需要添加图标的位置填写图标代码,并添加类.iconfont,例如我想添加购物车的图标:
复制图标代码
html:
<a href=""><span class="iconfont"></span>购物车<span class="num">(0)</span></a>
css:
.topbar-cart .iconfont{
font-size: 16px;
padding-right: 4px;
vertical-align: -2px; /*让字符下移*/
}
效果: