15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 在网页中使用 icon 字体图标 | 前端开发

在网页中使用 icon 字体图标 | 前端开发

时间:2023-06-24 14:57:01 | 来源:网站运营

时间:2023-06-24 14:57:01 来源:网站运营

在网页中使用 icon 字体图标 | 前端开发:本文首发于我的个人号「效率工具指南」




最近在 B 站上看 Pink 老师的前端视频,简单总结一下在网页中使用 icon 图标的两种方法。




直接插入字体图标




这里说的字体图标,是指既有普通 icon 图标的外观,又带有字体特征的图标,可以像调整字体那样、调整图标的大小和颜色,且图标放大之后不会失真变模糊。




我们一般是从网上下载字体图标的,譬如国内的阿里巴巴旗下的矢量素材网站 iconfont、国外的 IcoMoon 等。




去年写过一篇文章《微信小程序开发 | 如何在小程序中使用自定义 icon 图标》,其中介绍了 iconfont 图标的使用,这回介绍一下使用来自 IcoMoon 的图标的方法。




打开 IcoMoon 图标官网,从中挑选你想使用的 icon 图标,底部的 Selection 会统计你选中的图标数量,选好图标之后,点击右下角的 Generate Font,生成字体图标。







在打开的页面,会显示我们刚才挑选的所有 icon 图标,并且提供图标的 unicode 编码,这些编码等下要用到,但现在先不管。点击右下角的 Download,下载生成的字体图标文件。







IcoMoon 图标下载:

https://icomoon.io/app/#/select




解压下载的压缩文件,其中包含下面这些文件,我们需要用到其中的 fonts 文件夹。







fonts 文件中包含了 4 个字体文件,这是因为不同浏览器所支持的字体格式是不一样的,考虑到兼容性,fonts 文件夹就包含了主流浏览器支持的字体文件:










将 fonts 文件夹复制到网页的项目文件夹 中,譬如放在与 index.html 文件同级的路径下。




打开 HTML 文件,在 style 标签中粘贴下方的代码,定义我们等下需要用到的字体 icomoon。需要注意的是,如果 fonts 文件与 html 文件在同个路径下,就不需要修改下方代码中的 url 地址。




<style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?bawtoo'); src: url('fonts/icomoon.eot?bawtoo#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bawtoo') format('truetype'), url('fonts/icomoon.woff?bawtoo') format('woff'), url('fonts/icomoon.svg?bawtoo#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }</style>


粘贴代码之后,先来看一下我们最终想要实现的效果,如下图,下方的红色爱心❤️图标,就是前面说到的字体图标。根据最终想要实现的效果,我们要去到 html 文件中书写相应的代码。







在 html 文件的 body 标签中输入下方的一行代码,中间的 span 标签包含的方块,其实就是爱心图标,只不过它无法在 html 文件中正常显示。




<p>我 <span></span> 你</p>


这个方块也不是随意输入的,还得从我们前面下载的压缩文件夹中的 demo.html 查看。







在浏览器中打开 demo.html ,移动到爱心图标右下角的区域,框选有时看得到、有时看不到的方块字符,复制到剪贴板,接着粘贴到 html 文件中。







将方块字符粘贴到 html 中,如果此时在浏览器中预览网页效果的话,还是无法看到刚添加的字体图标的,因为还缺少对字体图标设置 CSS 样式——声明字体图标所使用的字体




html:

<p> 我<span></span>你</p>


css:

p span { font-family: 'icomoon';}


此时在浏览器中重新打开 html 文件,我们所使用的字体图标就会正常显示了。




如果你还想调整字体图标的大小颜色,可以在 CSS 中增加另外两个属性:font-sizecolor




css:

p span { font-family: 'icomoon'; font-size: 50px; color: red;}


一番设置之后,重新在浏览器中刷新页面,就可以看到最终的效果啦。




通过伪类选择器使用字体图标




前面介绍的第一种方法,需要同时在 body 标签(html) 和 style 标签(css) 中同时书写相关的代码,如果我们想让 html 文件的结构更加简单,我们可以通过第二种方法——在 style 标签(css) 中通过伪类选择器使用字体图标,这样就只需要在 style 标签或 css 文件中书写相关的代码。




先来看一下我们最终想要实现的效果,如下图所示,给输入框的右侧添加一个向下的小三角 图标







想制作这个效果,同样是先从前面介绍的 IcoMoon 网站下载字体图标,将解压后的文件中的 fonts 文件夹放到与 index.html 同级的路径下,接着在 html 的 style 标签中粘贴下方的代码:




<style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?bawtoo'); src: url('fonts/icomoon.eot?bawtoo#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bawtoo') format('truetype'), url('fonts/icomoon.woff?bawtoo') format('woff'), url('fonts/icomoon.svg?bawtoo#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }</style>


在 html 的 body 标签中插入一个空白的盒子 div 标签:

<body> <div></div></body>


接着在 style 标签中,给 div 盒子设置宽度、高度,并给它设置一个粗细为 1 px 的灰色边框:

<style> div { width: 200px; height: 40px; border: 1px solid gray;}</style>


此时在浏览器中打开 html 文件,就可以看到下图所示的孤零零的输入框。







接着继续给这个输入框「添砖加瓦」——添加一个向下的小三角 ,继续在 style 标签中书写代码:




div::after { content: ''; font-family: 'icomoon';}


稍微解释一下这个代码,在 div 后面加上两个英文中的冒号,并且跟上单词 after 或者 before,就是所谓的伪类选择器,在我目前的认知范围内,伪类选择器就是用 css 代码来给 html 页面添加额外的元素,我们也确实可以在网页中看到添加的小三角,如下图。但这段代码是写在 css 而非 html 文件中,一定程度上可以简化 html 文件的代码。







到这里,我们就顺利地在 html 页面中添加了字体图标,值得一提的是,伪类选择器中 content 属性的值,除了可以是字体图标对应的方块字符,还可以是字体图标下方的编号




以下图为例,爱心图标的编号是 e9da,因此 content 属性的值也可以是 /e9da ,通过编号来调用字体图标的时候,需要在编号的最前面加多一个反斜杆 / 。




div::after { content: '/e9da'; font-family: 'icomoon';}





引入字体图标之后,字体图标默认位于输入框的左上角,为了将字体图标移动到右侧居中的位置,这里还需要用到另外的知识——定位,包含相对定位绝对定位







关于定位的知识,这里暂时就不过多展开了,可以记住一个口诀「子绝父相」,即子元素设置绝对定位,父元素设置相对定位,就可以达到自由移动下拉小三角位置的目的。




分别给 div 和伪元素选择器 div::after 添加另外的样式:




div { position: relative;}div::after { position: absolute; top: 12px; right: 10px;}


这里的 top 和 right 属性的值,并不是唯一的,需要根据实际情况,配合浏览器的开发者工具进行调整,最终得到看起来比较舒适的值(主要就是调整到小三角可以位于输入框水平居中的位置),最终效果如下。







以上,就是本次想和你分享的内容。

希望对有需要的朋友有帮助。

关键词:字体,使用

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭