阿里妈妈iconfont矢量图标的使用方法(超详细) |
您所在的位置:网站首页 › iconfont图标制作 › 阿里妈妈iconfont矢量图标的使用方法(超详细) |
iconfont使用方法
1.为什么要使用iconfont? 之前我们一直使用的是雪碧图,虽然好用,但是也是有一定的限制的,比如说,你希望这个图标大一点,当然你也可以调节雪碧图的大小但是此时会出现图片不清楚的情况,那么这个时候也就体现了iconfont的好处了,它的特点:虽然显示的是图片的形式,但是本质确是字体,也就具备了font的相关属性,可以调节它的大小,等等属性,非常方便,好处聊完了,下面看看怎么运用它吧! 怎么下载矢量图?阿里矢量图网站:www.iconfont.cn 不收费哦~~,当然也有国外的矢量图网站我就不多说了,咱们的就够用。 进入网站以后先注册,注册完成以后,你会看到界面各式各样的矢量图标。 找一个自己需要的模块进去 可以看到第二行第三个是我喜欢的,鼠标移动到自己希望使用的图标上面,就会显示一个购物车,收藏,以及下载的图标,此时点击第一个购物车的形状的图标。 点击上面的购物车; 先说说吧这三个按钮的作用:第一个就是把这些矢量图直接加到自己的项目当中;第二个是直接把矢量图下载下来,不过此时下载下来的也就是图片了,不再是字体;不用想肯定是用第三种啦,第三种下载以后就是一个zip文件,下载以后怎么使用呢? 把下载的zip文件解压,解压以后更改你希望的名字,我通常是改成fonts,更改以后把他存到你项目的目录里,然后打开font文件夹,里面有几个文件需要注意,如下图: 进入font文件夹: 第一个demo.css文件,里面有你下载矢量图的文件地址,操作的话就是复制里面的以下代码: 把以下代码复制到你这个html文件所链接的css文件中; @font-face { font-family: "iconfont logo"; src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); }第二个:demo_index.html文件可以直接打开,里面有你下载好的矢量图,矢量图下方有相应的代码。复制,放到span中,把span的类名设置成iconfont,或者什么都可以不过,你的css文件中此时都要给这个类名加上这句话,类名:{font-family:"iconfont" !important;}即可; 那么来看看整体的效果吧:(详细) 把上面的图片中的步骤完成,就能实现啦。 学会了嘛?还不清楚的话留言哦。(一定要注意路径问题) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |