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生成字体。

php图标字体库,制作图标字体字库相关推荐

CSS在线字体库，外部字体的引用方法@font-face
[新增]使用自己下载的字体的示例: 参考 http://www.w3cplus.com/content/css3-font-face @font-face{ font-family: &quo ...
Qt Qml 查看所有字体、添加字体库、使用字体库的方法
最近换了项目里的字体,所以整理一下qt设置字体相关的一点内容, 主要包括: 1.查看当前系统里所有字体的名称 2.添加路径下的字体库 3.使用字体库一.查看当前Qt所有字体的名称为什么要查看字体名 ...
android app字体库,Uni-app使用字体库，在浏览器正常，但是在Android手机，调不到字体库，如何修改呢？...
使用字体库,在浏览器正常,但是在Android手机,调不到字体库,如何修改呢? 字体库引用代码 @import './common/uni.css'; @font-face { font-family ...
Linux 安装字体库(附:中文字体包)
文章目录前言一.安装相关包二.配置相关信息 1.导入字体包 2.修改配置文件 3. 刷新配置并查看字体库前言由于JAVA画图时常用到Font 类对象,而这样的对象依赖于本地的字段. 新装的l ...
c语言矢量字体库,单片机用矢量字库的C语言调用
单片机用矢量字库的C语言调用本文关键词:字库,矢量,单片机,调用,语言单片机用矢量字库的C语言调用本文简介:单片机用矢量字库的C语言调用用TFT320X240分辨路的液晶屏的显示效果如下图:本文 ...
unity 字体width_unity制作图片字体
有时候美术会给出一系列的艺术字,例如数字0,1,2,3,4,5,6,7,8,9,这些字以图片的形式给开发人员,这时候图片的用法怎么用呢? 第一种想到的方法是把图片按字命名,然后以字为key存成字典,获 ...
在iOS应用中使用字体图标及制作字体库
做iOS开发的都知道,因为屏幕分辨率的问题,在iOS app 中都得放两套切图来支持retina屏和非retina屏幕,但是文字就不需要考虑分辨率的问题,所以可不可以将一些图片用文字来代替呢,省时省力 ...
html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言比较基础的图标加载:和块元素的背景background ...
字体图标在服务器上显示不出来,fontawesome图标字体库组件在服务器上显示不出来图标的解决...
这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...
阿里图标字体库的动态使用Android
android里的图标之前一直都是使用图片,一个图标需要不同尺寸的几张图片,无形的会增大资源包,而阿里图标字体库是矢量的,使用的是字符,可以使安装包变得更轻量,于是决定使用阿里图标字体库 . 传送门: ...

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

php图标字体库,制作图标字体字库相关推荐

最新文章

热门文章