淘先锋技术网

首页 1 2 3 4 5 6 7

最近,我学习了一种叫做Iconfont的东西,可以用来生成CSS中的图标。它的使用非常简单,你只需要在图标库中选择你需要使用的图标并获取相应的代码,然后将其添加到CSS文件中即可。下面我来为大家介绍一下这个过程。

// 在HTML中使用Iconfont:// 这里的就是Iconfont中图标的Unicode码。
// 在CSS中使用Iconfont:
.iconfont{
font-family:'iconfont';                // 将iconfont字体族指定给这个class
font-size:16px;                        // 设置字体大小
font-style:normal;
-webkit-font-smoothing: antialiased;   // 设置字体平滑
-moz-osx-font-smoothing: grayscale;
}
// 从Iconfont中获取代码:
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9及以下浏览器 */
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'), /* Chrome、Firefox、Opera、Safari, Android, iOS 4.2+ */
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
// 利用Iconfont生成CSS:
.icon-search:before{
content:'\e62d';
font-family:'iconfont';
-webkit-font-size: 24px;
-moz-osx-font-smoothing: antialiased;
font-size: 24px;
}

看到这里,相信大家已经了解了如何使用Iconfont生成CSS中的图标。除了这种方法,我们还可以使用Canvas等技术来自定义图标。无论哪种方法,我们都可以通过适当的技术手段来美化我们的网站,使其更具有吸引力。