这个可以试试Fontello、Icomoon或者IconFont吧! (制作图标字体的方法有很多,可以参考这里,本文主要介绍的是如何快速利用已有的图标制作字体文件然后在应用中使用) 1.Fontello: icon font generator Fontello网址:http ://fontello.com/ Github地址:https://github.com/fontello/fontello Fontello是个图标字体生成器,通过它可以把一些图标作成字体放到自己的项目中 同时,在解压后的font文件夹中有我们需要的ttf字体文件fontello.ttf,下面介绍下详细的扩展实现步骤。 IcoMoon导出得到的zip文件和Fontello导出的结果类似,使用它的ttf文件对Iconify进行扩展的方式也一样。
Fontello,一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设计师、前端开发者来说就是宝藏。 结合目前的 Web-font 趋势,Fontello 上的图标元素定能让你手中的网站大放异彩! Fontell 官方地址:http://fontello.com/ ? ?
@font-face { font-family: 'fontello'; src: url('../font/fontello.eot?53711433'); src: url('.. /font/fontello.eot?53711433#iefix') format('embedded-opentype'), url('../font/fontello.woff2? /font/fontello.woff?53711433') format('woff'), url('../font/fontello.ttf? /font/fontello.svg? /font/fontello.svg?
-- --> --
小图标的设置·图标(icon)的来源 本主题中的小图标全部来自国外的一个icon-font的网站:http://fontello.com/。 上传json 文件、4个svg 文件到fontello 先下载该文件包,解压缩后,里面有4个 svg 格式的文件以及一个config.json 文件。 ? ? 二、一面打开主题目录下的fontello文件夹,一面打开fontello-xxxx.zip 文件的下一级目录(见图),然后解压这些文件覆盖到主题目录下的fontello文件夹下,覆盖源文件。 ? ? Q:为什么你不将 http://fontello.com/ 上所有的图标都下载集合起来,然后我选择我喜欢的,直接填入代码称号就可以了,大家都方便。 A:这当然可以,我也想这样。 但——如果这样,你的网站该多么臃肿,http://fontello.com/ 上千个图标,而你仅仅要使用其中几个图标,为了方便你觉得是全部下载回来还更好??! 按需使用才是王道,大哥。
handsome 主题自带部分fontello图标,使用方法在图标的名字前加入 fontello fontello- 即可。具体列表可在 handsome 主题文档 查看。 class="auto"> i> <i class="<em>fontello</em> icon-fw <em>fontello</em>-angle-down
在此,我们推荐一个在线工具:http://fontello.com/。 它可以将不需要的图标从字体中排除,这样,就能有效减少字体文件体积大小。 在这里,我们只需要 fontello.ttf 的 Base 64 编码文本,以及 fontello.css 的部分图标字体代码。 转码 转成 Base 64 很简单,只需要一行指令就可以了。 ?
2 Fontello http://fontello.com/ Fontello是一款在线免费Web-font图标大合集,这里不仅可以找到你需要的图标,而且你可以挑选并选择你所需要的字形,并编译成自己需要的一套
--加载时间-->
首先我们先去Fontello这个图标字体库去选中几个图标: 然后下载下来,解压如下: 通过浏览器打开我们的 demo.html 文件就可以看到我们下载到的字体图标效果。 在正式使用之前,我们先研究下 fontello.css 的样式,代码截图大概如下: 首先是使用 [@font-face](/user/font-face) 定义了字体,然后通过伪元素选择器 [ 我们新建一个文件,直接引入(或拷贝)解压包中fontello.css的字体样式,写上对应的 HTML 结构如下: <! html> <head> <meta charset="UTF-8"> <title>字体图标</title> <link rel="stylesheet" href="css/<em>fontello</em>.css 字体资源与字体图标库 dafont 有字库 GoogleFont(需要访问外国网站) 字蛛 <em>Fontello</em> icomoon iconfont 参考资料 CSS3 字体 @font-face)
后记 Webfont 这货随着扁平化的趋势越来越流行了,本站的主题Devework 主题也早就赶脚使用上了,不妨看看文章标题下面的小图标就是Webfont 弄的,不过Jeff 是采用Fontello 的图标 Fontello 的图标好处就是可以按需使用,该用的就集中在一起,不多加载;推荐使用这个。当然,Dashicons 的图标也不错,唯一不足是数量目前过少。
本插件的font icon 源来自于 fontello:http://fontello.com/。
首先我们先去Fontello这个图标字体库去选中几个图标: 然后下载下来,解压如下: 通过浏览器打开我们的 demo.html 文件就可以看到我们下载到的字体图标效果。 在正式使用之前,我们先研究下 fontello.css 的样式,代码截图大概如下: 首先是使用 @font-face 定义了字体,然后通过伪元素选择器 [class^="icon-"]:before 我们新建一个文件,直接引入(或拷贝)解压包中fontello.css的字体样式,写上对应的 HTML 结构如下: <! html> <head> <meta charset="UTF-8"> <title>字体图标</title> <link rel="stylesheet" href="css/<em>fontello</em>.css 字体资源与字体图标库 dafont 有字库 GoogleFont(需要访问外国网站) 字蛛 <em>Fontello</em> icomoon iconfont 参考资料 CSS3 字体 @font-face
--这是一个图标--> <?
DEMO:http://jsbin.com/ Fontello Fontello 是个图标字体生成器。这个工具允许用户把这些图标 web 字体放到自己的项目中。 DEMO:http://fontello.com/ XDebug xdebug 是一个开源的 php 调试器,以 php 模块的形式加载并被使用。 ?
先通过 cloudconvert 把字体文件转化为 svg 后再用 fontello 打开查看 http://fontello.com/ https://cloudconvert.com/ttf-to-svg
超出部分以省略号显示 字体图标iconfont icomoon字库 http://www.iconfont.cn/ 阿里icon font字库 `http://www.iconfont.cn/ fontello http://fontello.com/ Font-Awesome http://fortawesome.github.io/Font-Awesome/ 字体图标 设计字体图标 上次生产字体包 上传生成字体包 推荐网站: http://icomoon.io 阿里icon font字库 http://www.iconfont.cn/ http://fontello.com
请上车的乘客系好安全带,现在是:')" class="OwO-logo"><span class="OwOlogotext
handsome图标介绍 handsome主题在配置文档中一共介绍了四种图标库的引入配置方法,分别是 1.glyphicon字体图标 2.主题内置的部分iconfont图标 3.主题内置的部分fontello 全部的feather图标 同时也介绍了两种扩充图标库的方法: 1.通过引入公共css文件来引入fontawesome图标库全部图标 2.通过修改字体文件config.json及css文件中相关标签来扩充fontello
Genericons是由官网WordPress 的母公司Automattic 开发的一个Icon Font 项目,类似的有Fontello、Font Awesome。