微信做网站网站,网站域名注册商,深圳绿色建筑信息平台,建筑工程公司管理制度原标题#xff1a;Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门#xff0c;由于移动端的网站页面的收缩性要求很高#xff0c;必然在网页设计中#xff0c;一些小点的图标#xff0c;使用图片收缩性#xff0c;以及美观上并不是很理想Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门由于移动端的网站页面的收缩性要求很高必然在网页设计中一些小点的图标使用图片收缩性以及美观上并不是很理想下面给大家分享一下iconfont矢量图标(字体图标)如何在网页中使用如上图中使用到的都是iconfont图标使用起来非常方便随时可以自由的修改你想要的大小和颜色等等Iconfont是阿里巴巴推出的矢量图标库其中涵盖了1000多个常用图标并在持续更新中。iconfont图标的优势自由变化大小(高清屏无压力)自由修改颜色(纯色)可以添加一些视觉效果如阴影、旋转、透明度等iconfont图标在网站中的使用方法在iconfont的官网中调用iconfont图标的方法很多在项目中我就常用unicode引用方法第一步拷贝项目下面生成的font-face第二步定义使用iconfont的样式第三步挑选相应图标并获取字体编码应用于页面就这简单的三步就能做出你想要的字体图标了但是有很多小伙伴肯定会有疑问还不知如何使用(特别是刚接触字体图标的小伙伴)所以今天我还得用一个实例来教大家如何在网页中显示字体图标官网的知识只能教你如何加载文件而实操的话就得靠自己摸索了首先我想做一个底部导航栏如下(有4个小图标)要想展示这些图标首先想到的是要去iconfont官网搜索好图标然后下载到本地文件夹中输入你想要搜索的图标比如说搜索“首页”然后就有很多图标展示出来选择你想要的然后点击购物车的图标添加入库选好后到自己的购物车里可以看到如下图所示自己就新建一个项目文件用来管理好在哪个项目下的字体图标在自己的项目里可以看到添加好的图标然后点击下载至本地就完成了图标的下载在自己的html项目下新建一个font文件夹用来存放下载下来的字体图标文件在下载好的字体图标文件中选择以下4个文件拷贝到html下的font目录下即可现在就可以来定义自己的字体图标样式和布局了html:用来装字体图标的标签记得加上类 classiconfont才能显示字体图标字体编码可以到iconfont中你自己新建好的项目里查找css:这两部分记得写上如果怕忘记添加你们可以放在你的公用css样式里这样就可以自定义加载的图标的大小和颜色了因为字体图标就是一个字体所有可以把它当成是字体那样调整样式即可返回搜狐查看更多责任编辑
