日期:2012-8-27 来源:GBin1.com
在线演示 本地下载
主要特性
使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:
- 自由的变化大小
- 自由的修改颜色
- 添加阴影效果
- IE6也可以支持
- 支持图片图标的其它属性,例如,透明度和旋转等等
- 可以添加text-stroke和background-clip:text等属性,只要浏览器支持
如何使用?
文字修饰:
<h3>
<span aria-hidden="true" data-icon="⇝"></span>
Stats
</h3>
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}
单独图标:
<a href="#" class="icon-alone">
<span aria-hidden="true" data-icon="▨"></span>
<span class="screen-reader-text">RSS</span>
</a>
/* Same CSS as above, plus */
.icon-alone {
display: inline-block; /* Chrome 19 was weird with clickability without this */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}
创建你自己的icon font - IcoMoon
如果大家需要创建自己的iconfont,推荐使用iconmoon,使用它你可以通过上传SVG或者字体来生成你需要的icon字体,本文在线演示使用iconmoon生成。
步骤1:选择他们提供的或者上传自己的
......
来源:如何在HTML中使用图标字体 - icon font?
分享到:
相关推荐
前端开源库-icon-font-loader图标字体加载器,一个Webpack加载器,用于将SVG转换为CSS中的字体图标。
具有可缩放矢量图标的自定义@ font-face图标字体。 这是一整套由iOS 7启发而来的202个细线图标。这些视网膜就绪图标具有非常现代的风格,可以完美地配合任何项目。演示版打开以查看图标字体中所有字形的列表。文件...
gulp-font-icon gulp-font-icon是一个gulp插件,可从SVG文件生成图标字体。用法首先,安装gulp-font-icon作为开发依赖项: npm install --save-dev gulp-font-icon然后,将其添加到您的gulpfile.js: var fontIcon =...
font icon 使用demo
您可以使用Font Awesome 5或您选择的其他字体图标集(图标列表是完全可自定义的)。 实例化 您可以通过几种方式调用插件: // Create instance if not exists (returns a jQuery object) $ ( '.my' ) . iconpicker...
您可以删除src/svg目录中无用的图标svg文件。然后运行此命令进行重建。 npm run build 变更日志 2018-08-29 更新的图标: more , reload , tag , list , edit , share , copy , dashboard , pie-chart ...
此存储库包含示例项目,以演示如何使用图标字体在WinForms(Windows Forms)桌面应用程序中通过按钮控件渲染图标 如何运行项目 将此项目检出到磁盘中的某个位置。 使用Visual Studio打开解决方案文件。 生成并运行...
您将能够在选项中使用 type => 'et-icon' 例子: 'et_icon' => array ( 'type' => 'et-icon' , 'label' => __ ( 'Choose an ET Line Icon' , 'fw' ), ), 我已将inc/includes/中的option-types文件夹包含在...
最好的部分是提供的shell脚本,但是您也可以在您的(可能是很棒的)Python项目中直接使用它的功能。 还有一个font-awesome-to-png脚本,用于与该概念的一次迭代向后兼容。安装确保您具有所需的软件包。 来自PyPI...
vue-icon-font 插件 屏幕截图 安装 ...这是Alimama MUX制作的矢量图标管理与交流平台,设计人员可以在此处上传矢量图标,用户可以通过多种格式下载矢量图标,还可以将这些图标转换为字体以供前端工
安装通过 : npm install font-awesome-icon-chars通过: yarn add font-awesome-icon-chars用法资产您可以在目录中使用字符列表文件。 所有字符列表文件都将放置在此目录中。Node.js 您也可以从该模块中获取图标...
NodeJs包的抽象层icon-font-generator要求Node.JS v11 +安装: $ pub global activate icon_font_generator参数: * - 必需的--from *-输入svg的目录--out-font *-输出图标的字体路径(至文件,例如:lib / font....
Visual Studio代码的图标字体 各种图标字体的代码片段()。 该软件包也可用于和 。 屏幕快照从Sublime Text包中切出,但是您明白了安装扩展市场启动快速打开,粘贴以下命令,然后按Enter ext install idleberg.icon...
然后使用以下命令安装grunt和一些插件: npm install从草图文件创建图标字体在24x24网格上的Sketch文件中设计图标,并为要包含在图标字体中的每个图标创建切片(svg)。 请注意,您至少应保留3px的填充,以考虑上升...
鱼和熊掌不能兼得嘛,我们就不在为这个问题说太多的话了,不过我今天要与大家分享的主题和这个@font-face还是有很在关系的,使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际,以前的Icon都是依靠...
这是使用 ExtJS5 的图标字体示例。 这是使用以下字体的示例。
包含icon图像,class名,utf编码。 208页,每页6*9个图标。 图标在线查询和下载:<https://www.nerdfonts.com/cheat-sheet> 01.Powerline Symbols: 7 icons 02.Powerline Extra Symbols: 38 icons 03.Font Awesome:...
在NativeScript + Angular中使用字体图标的更简单方法。问题您可以通过在视图中将一个类与一个unicode引用结合在一起,将图标字体与NativeScript结合使用: CSS . fa { font-family : FontAwesome;} 看法...