关于字体图标的一些心得

最近本屌在写html。

有个坎一直过不去,也是一直知道存在这么个坎的,平时(工作之外)蒙着眼睛就过去了,现在有个页面有图标,又不想用spring来做(作图技术太渣),并且听说现在都流行用图标来做了,也只是听说而已哎。

开始想怎么弄字体图标了,首先是看别的网站是怎么弄的,这里参考36kr。

打开36kr,chrome打开开发者工具,看newwork,将type为font的文件下载到本地,

1

,如果你不想看这个很长很长的文件列表,也可以ctrl+s把整个网站的资源下载到本地,然后再在下载下来的文件夹里面找字体,通常有ttf格式,woff格式,svg格式。

好了,这些文件就是相当于一个sping的图标集,可是怎么打开这些文件了,双击? NO,那样只会把字体安装到你的电脑上,这字体本身并没什么意义,因为在网页上显示图标要找到图标相对的转义字符,可是怎么知道这些字体文件里面有哪些图标呢?一个nubility的软件登场了,那就是牛逼哄哄的FontCreator,你可以在这里下载,然后在这里看如何破解(屌丝都这样,别介意…),

好了,现在假设你破解好了,然后用FontCreator打开你下载过来的字体,你可以看到里面是不是有很多小图标?图标上面是不是有uniE600啊uniE601啊之类的文字,好了,这里记住这些数字就可以了,

2

然后开始写css了,在样式文件css中导入字体:


@font-face {
font-family: 'icomoon-header';
src: url('../fonts/icomoon.woff') format('truetype');
font-weight: normal;
font-style: normal;
}

注意路径哦~

然后找到你要添加图标的一个元素,比如.wrap或者#wrap,在样式文件中写入伪元素样式,伪元素简单来说是虚假的元素,(如果不懂什么是伪元素可以去百度一下或者w3cschool看一下)

.wrap:before{

content: ‘\e603’;

}

或者后面

.wrap:after{

content: ‘\e603’;

}

把这里的603换成你要的那个图标上面的数字,然后网页刷新,就可以看到你想要的图标了,另外可以去icomoon做图标哦,灰常建议!

发表评论

电子邮件地址不会被公开。 必填项已用*标注