1912 月

Genericons— a free, GPL, flexible icon font for blogs! wordpress 预装模板twentythirteen运用的图标字体

前端开发DIV+CSS, 用户体验设计, 英文网站建设, 视觉设计素材

在wordpress预装的模板twentythirteen在一些常用的图标也是运用的图标字体，查了一下是用的Genericons图标字体

字体由Automattic创建的，该自体能够完美跟wordpress主题结合

字体的运用

首先还是从Genericons官方网站 下载字体文件

把“font”文件放到运用的模板文件中，将代码

@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

放到模板本身的style.css文件里
接下来就可以在主题中运用这个图标字体了，在官方网站上都有字体的css和html代码
图标的呈现还是用的css content属性，例 content: ‘\f108’;

No comments

星期四, 19 12 月, 2013 | 分类：前端开发DIV+CSS, 用户体验设计, 英文网站建设, 视觉设计素材 | RSS 2.0 | 留言/评论 | Trackback

留言