|
最近在 B 站上看 Pink 老师的前端视频，简单总结一下在网页中使用 icon 图标的两种方法。 直接插入字体图标这里说的字体图标，是指既有普通 icon 图标的外观，又带有字体特征的图标，可以像调整字体那样、调整图标的大小和颜色，且图标放大之后不会失真变模糊。 我们一般是从网上下载字体图标的，譬如国内的阿里巴巴旗下的矢量素材网站 iconfont、国外的 IcoMoon 等。 去年写过一篇文章《微信小程序开发 | 如何在小程序中使用自定义 icon 图标》，其中介绍了 iconfont 图标的使用，这回介绍一下使用来自 IcoMoon 的图标的方法。 打开 IcoMoon 图标官网，从中挑选你想使用的 icon 图标，底部的 Selection 会统计你选中的图标数量，选好图标之后，点击右下角的 Generate Font，生成字体图标。
在打开的页面，会显示我们刚才挑选的所有 icon 图标，并且提供图标的 unicode 编码，这些编码等下要用到，但现在先不管。点击右下角的 Download，下载生成的字体图标文件。
IcoMoon 图标下载： https:///app/#/select 解压下载的压缩文件，其中包含下面这些文件，我们需要用到其中的 fonts 文件夹。
fonts 文件中包含了 4 个字体文件，这是因为不同浏览器所支持的字体格式是不一样的，考虑到兼容性，fonts 文件夹就包含了主流浏览器支持的字体文件：
将 fonts 文件夹复制到网页的项目文件夹📂中，譬如放在与 打开 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 文件中正常显示。 这个方块也不是随意输入的，还得从我们前面下载的压缩文件夹中的
在浏览器中打开
将方块字符粘贴到 html 中，如果此时在浏览器中预览网页效果的话，还是无法看到刚添加的字体图标的，因为还缺少对字体图标设置 CSS 样式——声明字体图标所使用的字体。 html： <p> 我<span></span>你</p>css：
此时在浏览器中重新打开 html 文件，我们所使用的字体图标就会正常显示了。 如果你还想调整字体图标的大小和颜色，可以在 CSS 中增加另外两个属性：font-size 和 color。 css： p span { font-family: 'icomoon'; font-size: 50px; color: red;}一番设置之后，重新在浏览器中刷新页面，就可以看到最终的效果啦。 通过伪类选择器使用字体图标前面介绍的第一种方法，需要同时在 body 标签(html) 和 style 标签(css) 中同时书写相关的代码，如果我们想让 html 文件的结构更加简单，我们可以通过第二种方法——在 style 标签(css) 中通过伪类选择器使用字体图标，这样就只需要在 style 标签或 css 文件中书写相关的代码。 先来看一下我们最终想要实现的效果，如下图所示，给输入框的右侧添加一个向下的小三角🔽图标。
想制作这个效果，同样是先从前面介绍的 IcoMoon 网站下载字体图标，将解压后的文件中的 fonts 文件夹放到与
在 html 的 body 标签中插入一个空白的盒子 div 标签： <body> <div></div></body>接着在 style 标签中，给 div 盒子设置宽度、高度，并给它设置一个粗细为 1 px 的黑色边框：
此时在浏览器中打开 html 文件，就可以看到下图所示的孤零零的输入框。
接着继续给这个输入框「添砖加瓦」——添加一个向下的小三角🔽，继续在 style 标签中书写代码： div::after { content: ''; font-family: 'icomoon';}稍微解释一下这个代码，在 div 后面加上两个英文中的冒号，并且跟上单词 after 或者 before，就是所谓的伪类选择器，在我目前的认知范围内，伪类选择器就是用 css 代码来给 html 页面添加额外的元素，我们也确实可以在网页中看到添加的小三角，如下图。但这段代码是写在 css 而非 html 文件中，一定程度上可以简化 html 文件的代码。
到这里，我们就顺利地在 html 页面中添加了字体图标，值得一提的是，伪类选择器中 content 属性的值，除了可以是字体图标对应的方块字符，还可以是字体图标下方的编号。 以下图为例，爱心图标的编号是 e9da，因此 content 属性的值也可以是
引入字体图标之后，字体图标默认位于输入框的左上角，为了将字体图标移动到右侧居中的位置，这里还需要用到另外的知识——定位，包含相对定位和绝对定位。
关于定位的知识，这里暂时就不过多展开了，可以记住一个口诀「子绝父相」，即子元素设置绝对定位，父元素设置相对定位，就可以达到自由移动下拉小三角位置的目的。 分别给 div 和伪元素选择器 div::after 添加另外的样式： div { position: relative;}
这里的 top 和 right 属性的值，并不是唯一的，需要根据实际情况，配合浏览器的开发者工具进行调整，最终得到看起来比较舒适的值（主要就是调整到小三角可以位于输入框水平居中的位置），最终效果如下。
以上，就是本次想和你分享的内容。 希望对有需要的朋友有帮助。 |
|
|
来自： 九九吉祥 > 《搭建Discuz网站》
