Web前端学习—如何在网页中插入字体图标详细步骤 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

帝皇彩票官网蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


Web前端学习—如何在网页中插入字体图标详细步骤

2020-2-2 释然 前端及开发文章及欣赏


一、什么是字体图标
字体图标:简单的说,就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样,但它的本质是文字。目前在移动端应用比较广泛!



二、字体图标的使用步骤
这里以阿里巴巴矢量图标库为例!!!

sep1:
百度搜索iconfont,找到阿里巴巴矢量图标库官网

网址在这里https://www.iconfont.cn/
进去之后注册或登录,共有3种登录方式,在这里我使用新浪微博账号登录


好了,登录之后我们就可以在里面选择自己想要的字体图标啦!!!那么,如何选择下载并应用到自己的项目中呢??别着急,跟着我走!

sep2:下载字体图标字体库
在这里我们可以根据自己的需求输入相应的关键字进行搜索(中英文都可以)

鼠标放上去,然后就可以把自己喜欢的宝贝加入购物车啦!

网购的赶脚有木有,
我知道,看到这里大家就该有疑问了,
还要花钱买吗?
放心!
答案是:不需要!

我们选的东西都在购物车里啦!

打开购物车,就能看到你选的图标了!!
接下来你要做的是把它们下载到本地。

由于要在网页中使用
在这里我们选择 下载代码

下载后将压缩包解压,为了方便后续使用我们改一下文件夹名称,在这里我改为 icon (注意:在HTML中导入路径时,记得带上你所改的文件夹名称)

打开之后你会发现里面有不同类型的文件(建议都不要删除)

打开后缀名为.html的这个文件(可以更直观地查看自己下载的字体图标)



step3:在项目中引用字体图标
不要走开,重点来了!!!
官方提供了三种引用方法(下面对应的都有步骤)


Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
兼容性最好,支持 IE6+,及所有现代浏览器。
支持按字体的方式去动态调整图标大小,颜色等等。
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
Unicode 使用步骤如下
第一步:拷贝项目下面生成的 @font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('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; }
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">&#x33;</span>

font-class 引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
兼容性良好,支持 IE8+,及所有现代浏览器。
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>

symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
兼容性较差,支持 IE9+,及现代浏览器。
浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

下面,我就跟大家详细说说 font-class 引用的引用方式:

打开编辑器(在这里我使用的是 VS Code编辑器),新建一个项目文件夹(demo)


将解压后的字体图标文件夹(icon)直接放到demo目录下


在demo文件夹下面新建一个html文件 demo.html

导入icon文件夹里面的外部样式表
<link rel="stylesheet" href="./icon/iconfont.css">

iconfont.css 里面就是我们下载的字体图标的所有css样式了,我们打开看看吧!
你会发现里面有一个 iconfont类名(这里划重点!后面要用),它是所有字体图标的公用样式。


这时我们就可以在页面中使用这些字体图标啦!上面我们只是导入了整个css样式表,现在我们要针对性地把某个图标引用到html页面中,并在网页中显示出来。
下面 我们就开始写页面的主体部分吧!

<p> 我有一个梦想:能够拥有一套 <span class="iconfont icon-home"></span> </p>
这里的span标签里面放的就是要用的某个字体图标了,你会发现它用了两个class类名。
第一个是iconfont,也就是我前面划的重点(到这里不明白的话,可以再回头看看)
第二个是icon-home,这个类名从何而来呢?
来,继续往下看,再次打开icon文件夹下的

话不多说,直接看图

是不是对应上啦!简单地说就是你要用那个图标就添加它的class类名。

到这里,恭喜你已经学会了如何在网页中插入字体图标啦!!!
那么,赶快运行一下看看效果吧!

到这里是不是还满足不了你的需求,会有这样的疑问:如果是这样的效果,跟一张图片有什么区别呢???
当然不是啦!
之所以叫做字体图标,顾名思义,它在网页中就是一种字体的存在,不过它比普通字体长得好看些有木有!
我们可以像更改文字样式一样去更改它的样式,比如说 大小、颜色、阴影…

Symbol 引用方式还可以实现下面原图标的彩色效果哦!可以自己照着官方提供的步骤试试看


下面附上Font class引用方法的 源代码 供参考
前面的步骤一定要看!!!
如果前期工作没做的话,直接用我的源代码是实现不了的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style>
        .iconfont{
            font-size: 200px;
            color: palevioletred;
            text-shadow: 18px 17px 17px gray;
        }
    </style>
</head>
<body>
    <p>
        我有一个梦想:能够拥有一套
        <span class="iconfont icon-home"></span>
    </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
花费了很长时间整理出来的。
很简单是不是!!!
看到这里还不会的话,建议重新再看一遍!

其中有错误的话,还请指出,我会虚心接受并改正!!!
————————————————
版权声明:本文为CSDN博主「Humy.」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42678796/article/details/104569773
标签: Web前端学习—如何在网页中插入字体图标详细步骤 « JavaScript中的this/call/apply/bind | 实战:如何利用栅格系统做响应式设计- 后台设计经验总结(2)»


蓝蓝 http://www.bjhbys.com

  1. 2020年3月(29)
  2. 2020年2月(60)
  3. 帝皇彩票官网2020年1月(32)
  4. 2019年12月(50)
  5. 2019年11月(61)
  6. 2019年10月(49)
  7. 2019年9月(48)
  8. 2019年8月(58)
  9. 2019年7月(58)
  10. 2019年6月(58)
  11. 2019年5月(31)
  12. 2019年4月(37)
  13. 2019年3月(43)
  14. 2019年2月(25)
  15. 帝皇彩票官网2019年1月(45)
  16. 2018年12月(41)
  17. 2018年11月(40)
  18. 2018年10月(29)
  19. 2018年9月(40)
  20. 帝皇彩票官网2018年8月(87)
  21. 2018年7月(107)
  22. 2018年6月(86)
  23. 帝皇彩票官网2018年5月(110)
  24. 2018年4月(40)
  25. 2018年3月(35)
  26. 2017年8月(35)
  27. 2017年7月(45)
  28. 2017年6月(7)
  29. 2017年5月(27)
  30. 2017年4月(51)
  31. 2017年3月(70)
  32. 2017年2月(65)
  33. 帝皇彩票官网2017年1月(69)
  34. 2016年12月(55)
  35. 2016年11月(111)
  36. 2016年10月(92)
  37. 帝皇彩票官网2016年9月(53)
  38. 2016年8月(9)
  39. 2016年7月(4)
  40. 2016年6月(9)
  41. 2016年3月(19)
  42. 2016年2月(26)
  43. 2016年1月(30)
  44. 2015年12月(33)
  45. 2015年11月(35)
  46. 2015年10月(46)
  47. 2015年9月(43)
  48. 2015年8月(40)
  49. 2015年7月(33)
  50. 帝皇彩票官网2015年6月(46)
  51. 2015年5月(58)
  52. 2015年4月(70)
  53. 帝皇彩票官网2015年3月(55)
  54. 2015年2月(17)
  55. 2015年1月(33)
  56. 2014年12月(21)
  57. 2014年11月(84)
  58. 2014年10月(94)
  59. 2014年9月(6)
  60. 2014年8月(1)
  61. 2014年7月(13)
  62. 2014年6月(66)
  63. 帝皇彩票官网2014年5月(99)
  64. 2014年4月(88)
  65. 帝皇彩票官网2014年3月(102)
  66. 2014年2月(68)
  67. 2014年1月(83)
  68. 帝皇彩票官网2013年12月(106)
  69. 2013年11月(112)
  70. 2013年10月(61)
  71. 2013年9月(20)
  72. 2013年7月(13)
  73. 2013年6月(27)
  74. 帝皇彩票官网2013年5月(48)
  75. 2013年4月(39)
  76. 2013年3月(8)
  77. 2013年2月(20)
  78. 2013年1月(31)
  79. 2012年12月(33)
  80. 帝皇彩票官网2012年11月(31)
  81. 2012年10月(23)
  82. 2012年9月(8)
  83. 2012年7月(14)
  84. 2012年6月(15)
  85. 2012年5月(31)
  86. 2012年4月(24)
  87. 2012年2月(4)
  88. 2012年1月(8)
  89. 帝皇彩票官网2011年12月(35)
  90. 2011年11月(32)
  91. 2011年10月(13)
  92. 2011年8月(1)
  93. 2011年6月(1)
订阅Rss
迪士尼彩乐园 快三投注 状元彩票计划 快3娱乐平台 吉林快3代理 河北快3 吉利彩票投注 博发彩票开户 上海时时乐 博发彩票开奖