我在更换文字图标的过程中,主要是感受到了 Font Awesome和 iconfont。我原本打算使用 Font Awesome,因为 Font Awesome在其自由版本中并没有我需要的图标, Pro版本的数量虽多,却并不完整,远不如 iconfont那么自由,但 Font Awesome与 CSS的 CSS构架相结合,可以使用动画、旋转、翻转、组合等特效。总体而言, Font Awesome适用于迅速地应用,而 iconfont则适用于 DIY。
最近他把博客上的图标换成了阿里的 iconfont图标,其实他早就想换了,只是懒得改而已。用过之后,他发现,真的很好吃!iconfont拥有大量的图标,并且可以很方便地替换图标,并且现在支持彩色字体图标。
iconfont也很容易用,比如 unicode,比如做一个项目,把你想要的东西放进去,再把它放进去,再把它变成 fontface。默认产生的font-face不支持IE8及更低的浏览器,您可以将 EOT放在专门的字型内。
在css文件里面引用生成的font-face
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
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;
}
挑选相应图标并获取字体编码,应用于页面
最后能在页面展示下图的效果。
![「代码发布」WordPress添加字体图标iconfont改善UI视觉体验插图1 「代码发布」WordPress添加字体图标iconfont改善UI视觉体验插图1](https://static.esw.eswlnk.com/2022/08/20220814081304464.png)
在实际使用中,有些图标不是直接放到页面上的,而是类似background方式放到页面上的。这个时候就可以使用font-class方式来展示这些字体图标。
在2011年的时候写过一篇文章《JQuery+CSS实现分类菜单前面不同的图标》和demo,是通过JQuery和CSS配合在展示不同图标的,这里使用iconfont就非常简单了,通过伪类的方式展示图标,在元素之前或者元素之后加上一些内容,可以查看使用iconfont来实现的demo。
Html代码
同样引用生成的font-face。
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
根据实际情况重新定义iconfont的样式
.page_item:before {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#444;
}
使用:before配合content,在元素之前加上图标的unicode编码,注意content里面引用的内容,比如Unicode编码是 他用&#x后面的4个字符 \e65e
.home:before{content: "\e65e";}
.page-item-1:before{content: "\e60e";}
.page-item-2:before{content: "\e9c0";}
.page-item-3:before{content: "\e605";}
.page-item-4:before{content: "\e606";}
最后
:before 和 :after算是很常用的伪类了,有时候我也会经常看到 ::before 和 ::after 这样的写法。
虽然效果好像差不多,但声明不同,伪类和选择器之间用一个冒号隔开,伪元素则是两个冒号隔。
伪类和伪元素的区别
伪类和伪元素都是为了给一些特殊需求加样式,定义上基本一致。
伪类像类选择器一样给已存在某个元素添加额外的样式;伪元素则是给自己虚拟的元素添加样式。
:before和::before 与 :after和::after 写法是等效的。
:before/:after 是Css2的写法,::before/::after 是Css3的写法。
:before/:after 的兼容性要比 ::before/::after 好。
所以IE8及以上能支持 :before/:after 但IE8就不支持 ::before/::after 了,当然如果不需要IE8支持,就用双冒号(::)吧。
ESWINK , 版权所有丨如未注明 , 均为原创
📮评论