bootstrap
中的字符图标很好用,其实我们自己也可以做自定义的字符图标。
有一些字符,可以表示为图画,比如说微软的webdings
字体。
下面来演示一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-family: "webdings";
}
</style>
</head>
<body>
abcddsaf dfgd df
</body>
</html>
上面是很简单的html文件,body里面是敲了一些乱码,然后在style里面设置了font-family
,结果却发现:
原来的字符变成了矢量的图画。
这样好玩的字体,我们也可以自己做出来,利用一个国外的网站www.icomoon.io
, 这个网站是根据上传的svg图片生成字体。
准备好一个自己的svg图片,然后在网站上传,跟着网站的指引操作就好,
然后我们把字体下载,解压后,我们开始尝试着使用,因为下载下来的字体不是系统自带的,所以我们需要通过@font-face方法引入:
@font-face {
font-family: 'icomoon';
src: url('icomoon.eot');
src: url('icomoon.svg') format('embedded-opentype'),
url('icomoon.ttf') format('truetype'),
url('icomoon.woff') format('woff'),
url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
上面这一坨,不用自己写,下载下来的文件中有。
引入后,我们要开始用:
<style>
.icon-dudu ::before{
//写入内容,也就是字体中的被做成了图标的那个字符
content:"\e900";
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<span class="icon-dudu"></span>
在浏览器中查看,是可以的:
但是,icon-* 字体往往会有很多图标组成的,如果每写一个图标,就要写类似于上面的一坨东西,很麻烦,我们通过下面的代码简化:
<style>
[class^="icon-"],[class*=" icon-"]{
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
上面代码中,[class^="icon-"]
是匹配所有class
以"icon-"
开头的元素,但是也存在这样的情况,<span class="nav icon-dudu">
,在这种情况下,我们就要通过[ class*=" icon-" ]
来进行匹配,注意icon-
是有空格的。