html5自定义icon,自定义Font Icon
两位大师给大家准备近两百种不同的Icon图标,都是使用@font-face应用自定义的字体实现的。但有一个不足之处,有很多图标,我们无法使用字符或者实体符来识别,如果需要使用,只能把所有标签都应用,有时我们只需要一两个,而使用这么一个庞大的字符系统,好像有点不太划算。那么今天我要给大家介绍的是使用网络工具Fontomas自定义需要的font icon图标。
Fontomas为我们提供了四种不同的字体来制作Icon图标:
Fontomas为大家提供的四种字体都是以svg的格式,我们可以下载所需的字体,通过FontSquirrel或者OnlineFontconverter工具来帮助我们转换成所需的字体。下面我们就一起来看看如何得到所需的svg字体,并如何转换成字体。
要制作,必须要保证你那连网了,并且能正常登录到Fontomas网站。进入后你能看到下面这样的页面:
上面显示的是其中一种字体,下面还有其他三种字体,这些我们并不是非常关心,因为知道一种的做法,就知道其他的做法。我们关键来看上面的两个部分:
我们要用到的就是上图的两个部分,第一个部分告诉我们要先做什么,后做什么。而第二部分可以帮助我们设置icon的大小,如果你有font icon字体,你也可以上传,并定制。那么我们就按现成的来做吧。
第二步:选择需要的Icon
这步其实很简单,你可以在所需要的字体范围内选择你需要的icon。
你选中后,第二步的“Rearrange”会告诉你选中多少个icon,如上图所示。
第三步:获取字符号或实体符编辑
接下来点击蓝色导航中的“Rearrange”,我们就可以获取刚才选择的“14”个Icon相对应的“字符号”或者“实体符编码”:
第四步:获取svg字体以及字符号的编码
接下来这一步是关键的一步,点击“Save Font”我们就可以得到刚才选中的字符的svg字体以及对应的字符编码,并且需要下载到本地来:
并把对应的编码copy下来:
第五步:转换字体
这一步也是关键的一步,刚才我们得到的仅是“svg”字体,但有些浏览器并不支持这种字体(详细的参见@font-face),所以我们还需要借助工具将其转换成所需的字体,我习惯使用FontSquirrel工具。详细的转换请参考@font-face。此处我们只看看几张截图,帮助大家理解如何得到自己需的字体:
打开工个界面:
添加字体:
转换字体:
字体转换过来了,我们就可以正常使用了。下面提供这四种字体的全部代码:
@font-face调用转用的字体:
/*Entypo font*/
@font-face {
font-family: 'FontomasEmtypo';
src: url('entypo/fontomas-webfont.eot');
src: url('entypo/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('entypo/fontomas-webfont.woff') format('woff'),
url('entypo/fontomas-webfont.ttf') format('truetype'),
url('entypo/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/*IconicFill font*/
@font-face {
font-family: 'FontomasIconicFill';
src: url('iconicfill/fontomas-webfont.eot');
src: url('iconicfill/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('iconicfill/fontomas-webfont.woff') format('woff'),
url('iconicfill/fontomas-webfont.ttf') format('truetype'),
url('iconicfill/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/*IconicStroke Font*/
@font-face {
font-family: 'FontomasIconicStroke';
src: url('iconicstroke/fontomas-webfont.eot');
src: url('iconicstroke/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('iconicstroke/fontomas-webfont.woff') format('woff'),
url('iconicstroke/fontomas-webfont.ttf') format('truetype'),
url('iconicstroke/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/*WebSymbolsRegular Font*/
@font-face {
font-family: 'FontomasWebSymbolsRegular';
src: url('websymbolsregular/fontomas-webfont.eot');
src: url('websymbolsregular/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbolsregular/fontomas-webfont.woff') format('woff'),
url('websymbolsregular/fontomas-webfont.ttf') format('truetype'),
url('websymbolsregular/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
下面我们来看一个简单的详细运用:
HTML Markup
!
!
!
content:'!'
在“.fontomas”上调用上面定义的font:
.fontomas {
font-family: 'FontomasEmtypo';
}
此时将显示为:
上面只是简单的介绍了其中几种字符的icon的调用,你可以按上面的方法尝试其他的字符制作,我在这里整理了他们四种字符的所有icon的demo,有兴趣的同学可以点击这里。并且可以点击下载,获取相应的字体以及对应的就用编码。
下面附上对应字符的编码:
更详细的编码对照表可以点击这里。
上面介绍的只是如何自定义自己所需的字体来制作字符icon,当然大家得到自己的font icon后,完全可以对其进行更多的扩展制作,比如说类似于Font Awesome。有兴趣的同学自己可以去一试。
那么有关于自定义font icon就说到这里了,希望上面的方法对大家有所帮助。如果你有更好的方法或更好的资源可以一起分享。
如需转载烦请注明出处:
html5自定义icon,自定义Font Icon相关推荐
- 自定义Font Icon
前段时间在<@font-face制作Web Icon>一文收集了三种webfont通过CSS3的@font-face来制作Icon图标.现在在网上最为流行的是@robmadole和@sup ...
- 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
2019独角兽企业重金招聘Python工程师标准>>> 前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展 ...
- Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由RouteNavigation
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])
HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
- Font Icon 实践
刚接触font icon,所了解得不深,仅仅作学习笔记. 个人理解的font icon是以字体文件取代图片文件,来代替小图标. 好处是能基本兼容所有的主流浏览器,不再为IE6不兼容半透明图片而烦恼.并 ...
- Font Icon 的资源推荐
关于Font Icon的教程 How to Use Icon Font? @font-face @font-face制作Web Icon Icon font 实践 如何把你的图标转换成web字体 Fo ...
- mint-ui font icon
mint-ui font -icon 刚开始学习 mint-ui 的时候,那个心情,后来想着 mint-ui 是不是也提供了 一套font来 供自己使用呢? 后来查找mint 文档,诶,没写,那我 ...
- R语言编写自定义函数自定义ggplot图像中的图例(legend)的位置、图例标题、键值、文本字体大小(title、text、key)、颜色标识的大小、点形状pch的大小
R语言编写自定义函数自定义ggplot图像中的图例(legend)的位置.图例标题.键值.文本字体大小(title.text.key).颜色标识的大小.点形状pch的大小 目录
- WPF 自定义标题栏 自定义菜单栏
原文:WPF 自定义标题栏 自定义菜单栏 自定义标题栏 自定义列表,可以直接修改WPF中的ListBox模板,也用这样类似的效果.但是ListBox是不能设置默认选中状态的. 而我们需要一些复杂的UI ...
最新文章
- cesium 3dtiles 加载本地数据_Meteva笔记:加载本地观测数据
- 'module' object is not callable
- 11-Reliability, Availability, and Serviceability (RAS) Extensions
- 命令行运行vbs脚本并传参数给vbs中的变量简单示例
- 形似“飞碟”的无人机你见过吗?它还可以灭火!
- winxp精简版没有IIS的解决办法
- 基于JAVA+SpringMVC+Mybatis+MYSQL的医药信息管理系统
- 三星电视机的极光TV显示服务器异常,三星液晶电视机故障有哪些 三星液晶电视机故障解决方法【图文】...
- 一觉醒来感觉自己回到了九八年, 让大数据来解释
- P2966 [USACO09DEC]牛收费路径Cow Toll Paths
- android优化 清除无效代码 UCDetector
- java win10_java下载64位win10-javawin10 64位下载8.0.1210.13官方版-西西软件下载
- 电信机顶盒,废弃机顶盒复活,华为电信定制机顶盒,固件。设置关闭限制apk选项。安装自己所需的apk软件。
- excel工作表保护如何无密码撤销
- IAR在写结构体时不提示_U盘被写保护了以后怎么办?
- 【JS】388- 深入了解强大的 ES6 「 ... 」 运算符
- React---什么是受控组件、非受控组件
- windows7 安装哪个版本的vs_轻钢龙骨vs木龙骨 吊顶安装选哪个好,看完立刻做出了选择...
- 计算机附件计算器的用法,计算机附件中计算器使用方法.doc
- ZAP日志框架lumberjack日志归档库的分析使用