php图标字体库,制作图标字体字库

工具准备：

1.ps 或者 Illustrator 等

2.FontCreator 字体编辑器

操作步骤

1.在图片软件中调整好单独的图标；

2.打开FontCreator 新建个字体，定义名称，然后删成需要的样子(也可以不删 )。

3.打开一个空白字符图形，点击“导入图像”，导入我们制作一个图标。

4.右击字符图形，选“属性”，调下值 然后插入(这个值用在写页面的时候)，做完保存。

5.打开http://www.fontsquirrel.com/tools/webfont-generator上传刚才的字体 在线生成下其他格式的文件 然后下载下来。

6.css写法：

CSS@font-face {

font-family: 'fontName';

src: url('../font/fontName.eot');

src: url('../font/fontName.eot') format('embedded-opentype'),

url('../font/fontName.woff') format('woff'),

url('../font/fontName.ttf') format('truetype'),

url('../font/fontName.svg#fontNameregular') format('svg');

font-weight: normal;

font-style: normal;

}

[class^="icon-"],

[class*=" icon-"] {

font-family: fontName;

font-weight: normal;

font-style: normal;

text-decoration: inherit;

display: inline;

width: auto;

height: auto;

line-height: normal;

vertical-align: baseline;

background-image: none !important;

background-position: 0% 0%;

background-repeat: repeat;

}

[class^="icon-"]:before,

[class*=" icon-"]:before {

text-decoration: inherit;

display: inline-block;

speak: none;

}

.icon-call:before {

content: "\e600 ";

}

7.html：

HTML

完成！

题外话：这边使用的fontCreator工具，类似的工具还有很多，比如：IcoMoon和Iconfont 。道理都一样，先制作svg图标，再由svg生成字体。