2.font+html
先从网站下载小图标获取 fonts目录 然后引入
src: url("fonts/icomoon.eot?") format("embedded-opentype"),//重要的是?号
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.svg") format("svg");
之后设置元素的字体为所设置的命名就可
@font-face{
font-family:"imooc-icon";//命名src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("fonts/icomoon.eot?") format("embedded-opentype"),//重要的是?号
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
i{
font-family: "imooc-icon";
font-style: normal;
font-weight: normal;
font-size: 100px;
color:red;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;//可以让字体更清晰}
i标签中加入 &#x+16进制码 &#x必须写
3.font-css
@font-face{
font-family:"imooc-icon";//命名
src: url("fonts/icomoon.eot"); /* IE9 兼容模式 */
src: url("fonts/icomoon.eot?") format("embedded-opentype"),//重要的是?号
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
.icon{ 此处用class=icon直接加入标签中 如<i class="icon"> 此时只要加入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;
}
.icon-heart:before,icon-heart:after{ 再在标签中加入icon-heart 如<i class="icon icon-heart "> 就可以引用特定的图标 如heart
content=" \ +十六进制" 此处可以设置图标的颜色大小等
}