矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法

原标题:Iconfont矢量图标库在网站中的使用方法

大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理想;下面给大家分享一下iconfont矢量图标(字体图标)如何在网页中使用

f9c497c0f4ad5f524b184273a1547f25.png

如上图中使用到的都是iconfont图标,使用起来非常方便,随时可以自由的修改你想要的大小和颜色等等!

Iconfont是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。

iconfont图标的优势:

自由变化大小(高清屏无压力)

自由修改颜色(纯色)

可以添加一些视觉效果,如:阴影、旋转、透明度等

iconfont图标在网站中的使用方法:

在iconfont的官网中调用iconfont图标的方法很多,在项目中我就常用unicode引用方法,

第一步:拷贝项目下面生成的font-face

9dcba46a9b47bc46906c8465cd70f6a3.png

第二步:定义使用iconfont的样式

fff44f537713c64012490a8a4172d0dc.png

第三步:挑选相应图标并获取字体编码,应用于页面

9302af89e791f47d17f07acbccbcf240.png

就这简单的三步就能做出你想要的字体图标了,但是有很多小伙伴肯定会有疑问还不知如何使用(特别是刚接触字体图标的小伙伴)所以今天我还得用一个实例来教大家如何在网页中显示字体图标,官网的知识只能教你如何加载文件而实操的话就得靠自己摸索了!

首先我想做一个底部导航栏,如下(有4个小图标)

238302b220f15c67a1f2c0a3bd9fd4d3.png

要想展示这些图标,首先想到的是要去iconfont官网搜索好图标然后下载到本地文件夹中!

83e108b2f2e74a9db7851e7535f72a84.png

输入你想要搜索的图标

比如说搜索“首页”然后就有很多图标展示出来,选择你想要的,然后点击购物车的图标添加入库

9686d0f8a2f118a4d9ce8517870f260b.png

选好后到自己的购物车里可以看到如下图所示,自己就新建一个项目文件用来管理好在哪个项目下的字体图标

0b8c6d76c32ce2295767693a9ca47398.png

在自己的项目里可以看到添加好的图标,然后点击下载至本地,就完成了图标的下载

ea759a583d453e01479af381be3df993.png

在自己的html项目下新建一个font文件夹,用来存放下载下来的字体图标文件:

f96a6163ef3ef956e10bd86d82630790.png

在下载好的字体图标文件中选择以下4个文件拷贝到html下的font目录下即可:

63edab065b4026752f047e9f6ba4bdbf.png

现在就可以来定义自己的字体图标样式和布局了:

html:

c6dba7abae95e7127f679c21a4e9adf7.png

用来装字体图标的标签记得加上类 class="iconfont"才能显示字体图标;字体编码可以到iconfont中你自己新建好的项目里查找

css:

4040fbdf068dd1d22e79352bbf69b477.png

这两部分记得写上,如果怕忘记添加,你们可以放在你的公用css样式里

03bc7f4e3f91da92d155700e5b4c523a.png

这样就可以自定义加载的图标的大小和颜色了,因为字体图标就是一个字体,所有可以把它当成是字体那样调整样式即可!返回搜狐,查看更多

责任编辑:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/345905.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2021年春季学期期末统一考试 劳动与社会保障法(本) 试题

试卷代号: 1021 2021年7月 一、单项选择题(每小题1分,共10分。在每小题的四个备选答案中,选出一个正确的答案,请将正确答案的序号填在括号内) 1.劳动者的劳动权利能力和劳动行为能力一般开始于( )。 A.14周…

弗林斯传输公式、天线温度

这是被称为弗林斯传输公式。这个等式关系 自由空间路径损耗,天线增益和波长 接收和发射功率。这是一个基本 在天线理论方程,应该记住的(以及 上述推导)。 弗林斯传输方程的另一种有用的形式是给定的公式[2]。自 波长和频率&#…

2021年春季学期期末统一考试 成本管理 试题

试卷代号: 1032 2021年7月 一、单项选择题(本类题共20分,每小题2分) 1.交互分配法一般在( )分配中使用。 A.直接材料费用 B.辅助生产费用 C.直接工资 D.在产品成本 2.采用品种法进行成本计算时其成本计算期是( )。 A.定期于期末计…

html 垂直线代码,html – Bootstrap 3水平和垂直分隔线

你必须使用Bootstrap吗?这是一个基本的HTML / CSS示例,用于获取不使用任何Bootstrap的外观:HTML:Rich Media Ad ProductionWeb Design & DevelopmentMobile Apps DevelopmentCreative DesignWeb AnalyticsSearch Engine Marke…

马尔可夫决策过程 Markov decision process MDP, 连续时间Markov chain, CMDP(全)

引言 在概率论及统计学中,马尔可夫过程(英语:Markov process)是一个具备了马尔可夫性质的随机过程,因为俄国数学家安德雷马尔可夫得名。马尔可夫过程是不具备记忆特质的(memorylessness)。换言…

2021年春季学期期末统一考试 保险学概论 试题

试卷代号:1025 2021年7月 一、单项选择题(每小题1分,计10分) 1.财产保险合同的保险标的是( )。 A.物质财产及其有关利益 B.财产 C.财产及其有关利益 D.人的寿命与身体 2.保费收入总额占国内生产总值的比重是指( )。 A.保险密度 B…

Spring Boot完成示例

这篇文章提供了一个使用Spring Boot开发松耦合REST服务的完整示例。 使用spring boot,我们可以开发可独立运行的生产就绪Java应用程序,它是独立的应用程序,具有最小的依赖性,并且与其他应用程序的耦合较少。 大多数时候&#xff0…

2021年春季学期期末统一考试 国际公法 试题

试卷代号: 1018 2021年7月 一、单项选择题(每题1分,共10分,每题只有一项答案正确,请将正确答案的序号填在括号内) 1.关于国际法的效力依据问题,认为国际法的效力源于人类良知、理性和法律意识的…

html文字粒子效果简陋,5个很棒的CSS3文本粒子动画特效

CSS语言:CSSSCSS确定body {padding: 40px 0;font-family: bebas, sans-serif;}body .textcontainer {padding: 40px 0;text-align: center;}body .particletext {text-align: center;font-size: 48px;position: relative;}body .particletext.bubbles > .particl…

最小生成树、最短路径树

一、最小生成树与最短路径树的区别 最小生成树能够保证整个拓扑图的所有路径之和最小,但不能保证任意两点之间是最短路径。 应用如网络部线,把所有的电脑(服务器?)都连起来用的网线(光纤?)最少&#xff0c…

2021年春季学期期末统一考试 西方经济学(本) 试题

试卷代号: 1026 这里是引用 2021年7月 一、单项选择题(在下列各题的备选答案中选择一个正确的,并将其序号字母填入题后的括号里。每题2分,共30分) 1.其他因素保持不变,只是某种商品的价格下降,则…

国开文学英语赏析 2021春(2021年7月)

试卷代号: 1062 2021年7月 注意事项 一、将你的学号、姓名及分校(工作站)名称填写在答题纸的规定栏内。考试结束后,把试卷和答题纸放在桌上。试卷和答题纸均不得带出考场。监考人收完考卷和答题纸后才可离开考场。 二、仔细读懂题…

mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案

wx这个对象我们可以结合router和vux封装一下其中的navigateTo,redirectTo等路由及模态框和toast,并在webpack.base.conf配置wx指向该文件,这样我们就能直接使用wx这个对象面的方法不用修改/*webpack.base.conf*/resolve: {extensions: [.js, .vue, .json…

无线发射功率与增益

1. 无线发射功率与增益 无线电发射机输出的射频信号,通过馈线(电缆)输送到天线,由天线以电磁波形式辐射出去。电磁波到达接收地点后,由天线接收下来(仅仅接收很小很小一部分功率),并…

web 项目集成福昕_项目学生:Web服务集成

web 项目集成福昕这是Project Student的一部分。 其他帖子包括带有Jersey的 Web服务 客户端,带有Jersey的 Web服务服务器 , 业务层 , 具有Spring数据的持久性和分片集成测试数据 。 早先,我们成功地针对持久性/业务层&#xff08…

151205 财务管理原理作业(笔试题型)

《财务管理原理(专升本)》作业 一、单项选择题 1、融资租赁又称财务租赁,有时也称资本租赁。下列( )情形不属于融资租赁范围。 A、根据协议,企业将某项资产卖给出租人,再将其租回使用 B…

分享百度文库提交成功的八大因素

我做百度文库已经有两个多月了,今天也是第二次以博文的形式跟大家分享经验,应该比第一次会更成熟一些,但是个人的能力毕竟是有限的,另外我的SEO优化经验也不多,可能提出的观点也不是很全面,还希望大家多包涵…

html表单自动提交表单提交表单数据类型,表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上…

实施白色标签

有时(根据我的经验,很多时候)您需要为应用程序添加白色标签。 您通常可以以SaaS方式运行它,但是一些重要的或高知名度的客户端可能想要专用的部署或本地部署,或者只是在云部署中“自己的一角”。 白色标签通常包括不同…

卫星链路

卫星通信系统中,信息传输中,一条传输链路包括发端地球站、上行链路、卫星转发器、下行链路、收端地球站。按照空间分布可以分为星地链路和星间链路。影响其通信性能的因素主要有:发射端的发射功率与天线增益、传输过程中的损耗、传输过程中所…