用字体在网页中画Icon图标
2018-06-24 00:28:39来源:未知 阅读 ()
第一步,下载。IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下。fonts文件夹内有四种格式的字体文件:
注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示字体图标,必须同时引入这些字体文件。
第二步,使用@font-face规则。在样式文件中自定义字体
@font-face{
font-family:'imooc-icon';/*自己取的名称*/
src:url("fonts/icomoon.eot") format("embedded-opentype"),/*后缀为eot,format对应的字符串*/
url("fonts/icomoon.ttf") format("truetype"),
url("fonts/icomoon.woff") format("woff"),
url("fonts/icomoon.svg") format("svg");
font-weight:normal;
font-style:normal;
}
第三步,显示字体图标。比如要在span标签上显示字体图标,首先打开之前下载的解压后的字体文件夹,点击里面的demo.html,获得图标编码。
在span标签里写进 &#x图标编码; 如右图:
并在样式里设置该span标签的字体为我们自定义的字体名称。
最后,优化和兼容。为了兼容IE,对@font-face规则作出改进。
为了获得更好的显示效果,需要在span样式里再加入一些代码。
接下来,介绍第二种方式使用字体图标。
用字体图标的名称作为类名,并在相应标签上添加这个类名。代码片段如下:
.icon-film:before{
content:'\e913';/*注意这里用的是反斜线*/
}
<span class="icon-film"></span>
注:在下载字体图标时,可以点击网站顶部preferences按钮进行参数设置,下载完后,打开里面的css文件,有可供直接使用的代码。
参考资料:慕课网-用字体在网页中画Icon图标
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- 【2020Python修炼记】前端开发之 网页设计超级酷炫小技巧 2020-05-14
- 使用css将网页变成黑白色 2020-04-04
- @font-face定义的字体没有生效 2020-03-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash