我想给我的网站一些图标。现在我看到很多人使用Flaticon这个网站。
我所做的就是在 CSS 中添加这样的内容:
/**
* Font 1
*/
@font-face {
font-family: "Flaticon1";
src: url("flaticon1.eot");
src: url("flaticon1.eot#iefix") format("embedded-opentype"), url("flaticon1.woff") format("woff"), url("flaticon1.ttf") format("truetype"), url("flaticon1.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon1-"]:before,
[class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after,
[class*=" flaticon1-"]:after {
font-family: "Flaticon1";
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon1-basic21:before {
content: "\e000";
}
.flaticon1-bicycle21:before {
content: "\e001";
}
.flaticon1-car6:before {
content: "\e002";
}
/**
* Font 2
*/
@font-face {
font-family: "Flaticon2";
src: url("flaticon2.eot");
src: url("flaticon2.eot#iefix") format("embedded-opentype"), url("flaticon2.woff") format("woff"), url("flaticon2.ttf") format("truetype"), url("flaticon2.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon2-"]:before,
[class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after,
[class*=" flaticon2-"]:after {
font-family: "Flaticon2";
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon2-basic21:before {
content: "\e000";
}
.flaticon2-bicycle21:before {
content: "\e001";
}
.flaticon2-car6:before {
content: "\e002";
}
http://support.flaticon.com/hc/en-us/articles/205019862-CSS-code-for-Iconfont- http://support.flaticon.com/hc/en-us/articles/205019862-CSS-code-for-Iconfont-
我下载了想要的图标,但它不显示该图标。它显示这个:
我做错了什么?
1. 准备你的收藏
将单色图标添加到您网站的集合中
2.下载图标字体
打开您的收藏并按“下载收藏”按钮,然后选择 Iconfont
3. 准备你的收藏
将源文件和 CSS 复制到您的 Web 文件夹。
4.加载样式表
向您的网站负责人请求 CSS 样式表。
< link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css" >
5. 使用类
Use the classes
每个图标,它们将出现在您的网站上。之后,操纵它们CSS
。
使用示例:
<i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)