简介
字体图标,文件小且是矢量的。
对于不同的字体,实际上是键盘上的字符对应不同的矢量图。因此,可以作自定义的矢量图,使每张图对应不同的编码,通过修改字体font-family、使用编码找到相应的矢量图。
制作——icomoon
https://icomoon.io/->->(选择.svg文件,导入自定义的图标)
->选中自定义图标及要使用的网站预定义图标,点击Generate Font
->点击Preferences设置类名和前缀,也可修改编码->Download
字符编码默认从e900开始,不跟特定字符冲突,例如如果设置为61,则a对应该字符。
使用
style.css文件内容如下。可以引入(link)或拷贝(自己的css文件)到自己的项目中,注意url地址的改变。
::before是伪元素选择器,最好使用两个冒号。::before的使用不是必须的,也可以将content内容即字符编号直接添加在html元素的内容中i{font-family:'myFontfamily';} <i></i>,只是为了避免记忆编号,使用::before这种方式。
@font-face {
font-family: 'myFontfamily';
src: url('fonts/myFontfamily.eot?bxc84n');
src: url('fonts/myFontfamily.eot?bxc84n#iefix') format('embedded-opentype'),
url('fonts/myFontfamily.ttf?bxc84n') format('truetype'),
url('fonts/myFontfamily.woff?bxc84n') format('woff'),
url('fonts/myFontfamily.svg?bxc84n#myFontfamily') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'myFontfamily' !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;
}
.icon-logo:before {
content: "\e900";
color: #666;
}
.icon-weijinsuo:before {
content: "\e901";
color: #4d4d4d;
}
.icon-home:before {
content: "\e902";
}
.icon-newspaper:before {
content: "\e904";
}
.icon-quill:before {
content: "\e907";
}
.icon-headphones:before {
content: "\e910";
}
.icon-music:before {
content: "\e911";
}
<i class="icon-weijinsuo"></i>
Bootstrap也有字体图标,如果使用Bootstrap可以直接添加类。