IcoMoon图标字体的使用
What is IcoMoon?
IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and hosting icons as SVGs or fonts.
下面进行说明一下简单地使用方法
1、进入网址:主页面
进入到网站首页:
点击右上角icoMoon app按钮,进行按钮的选择,然后进入到如下界面:
点击import Icons按钮后,进行svg图片的添加,就会出现如下界面,下面前面四个图标就是我新添加的,之后点击右下角的Generate Font 按钮,出现如下界面
然后点击download按钮进行下载,下载之后就可以在代码中使用了
下载后的文件格式如下所示:
运用:将fonts文件夹全部内容和style.css文件放到相应的项目中。
根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。
当然添加字体还需要设置font-size,也可以根据实际情况设置color改变其颜色。
转载自:http://blog.csdn.Net/goodgirl1991/article/details/50416974
icomoon图标是一个超赞超实用的开源图标系列,其图标官网地址为https://icomoon.io/icons.html
好,接下来介绍如何将该系列图标应用在web页面。
下载选定icomoon图标
web代码的编写
- @font-face{
- font-family:'icomoon';
- src:url('icomoon.eot');
- src:url('font/icomoon.eot?#iefix') format('embedded-opentype'),
- url('font/icomoon.woff') format('woff'),
- url('font/icomoon.ttf') format('truetype'),
- url('font/icomoon.svg#SofiaProLight') format('svg');
- font-weight:normal;
- font-style:normal;
- }
然后编写html代码,并描述指定标签的css样式,向该标签中添加icomoon图标。
- <body>
- <div data-icon=""></div><!--在之前获得的图标html转义码,用来指定在该标签处添加哪一图标-->
- <div data-icon=""></div>
- </body>
- div:after{<!--:before或者:after必写,不然无法显示出图标-->
- font-family:'icomoon';
- content: attr(data-icon);<!--此处指定向标签中添加哪一图标-->
- }
通过以上步骤,图标得以显示
IcoMoon图标字体的使用相关推荐
- 使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标? 在说字体图标之前,我们先说一下图片,图片可以让我们的界面更加美丽,但是图片也是有缺点的,比如图片会增加总文件的大小,还会增加额外的HTTP请求,这都会降低网页的性能的.更重要的是图片不 ...
- 如何灵活利用免费开源图标字体-IcoMoon篇——张鑫旭
一.温故知新 之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系 ...
- 使用 IcoMoon 生成字体图标,并在微前端项目中使用
目录 1. IcoMoon 使用步骤 1.1 进入 IcoMoon 新建图集 1.2 选择并生成字体图标 1.3 使用字体图标文件 2. 微前端中实现换肤的一种思路 2.1 使用 CSS 变量 2.2 ...
- html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示 本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...
- 30个免费网页图标字体以及使用方法
文章来源:http://sc.chinaz.com/info/130228237055.htm 设计达人 版权: Free for personal or commercial projects 查看 ...
- python 图标字体_Icon-font图标字体的四类制作方法
FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选.但FontAwesome的图标毕竟有限,在某些特定的情景中,FontAwesome的字体并不能准确地传达合适的意义.为自己 ...
- 图标字体iconfont的使用
什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...
- html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言 比较基础的图标加载:和块元素的背景background ...
- 图标字体制作,mock数据
https://icomoon.io页面上有许多小图标 也可以自己导入自己的svg图片上传到该网站声称图标字体. 模拟后台数据 模拟数据请求通过在build文件夹下面dev-server.js中加入以 ...
最新文章
- ORB-SLAM3中的ORB提取
- MapReduce 中文版论文(转载)
- $(@_config=)什么意思?
- php win2003 下载,64位windows2003iis安装包|《win2003 iis安装包》64位完整版附安装PHP教材...
- Use the Shapes window to organize and find shapes
- jQuery利用JSONP解决AJAX跨域请求
- 修改Fiddler实用插件JsonViewer
- 消息队列控制灯代码_代码实现RabbitMQ死信队列的创建
- 研究人员发现:基于文本的AI模型容易受到改述攻击
- android tcp 最优窗口,Android 面试必备 - 计算机网络基本知识(TCP,UDP,Http,https)...
- 2020-爬虫技术ftx
- Transformer介绍
- 2017.4.21 螺旋矩阵 思考记录
- 安装默认报表服务器虚拟目录,报表服务器虚拟目录
- 【网络】IP地址格式转换(htonl、ntohl;inet_addr、inet_ntoa)
- Mysql基本语句(个人笔记)
- steam++(GitHub加速)433端口占用解决方案
- excel怎么把竖排变成横排_衣服如此凌乱?怎么能忍受的了?衣柜收纳,试试这些神器吧...
- canvas lineWidth1px问题
- 怎么用u盘安装服务器系统,怎么安装原版Windows server 2008?U盘安装很省心
热门文章
- [other]恢复word文档
- 使用node.js来制作音乐(scribbletune)
- 虚幻4引擎引起的游戏崩溃问题解决办法(UE4 crash)
- 百度智能云大数据平台技术讲解及落地实战
- python不包含某字符_python正则表达式匹配不包含某几个字符的字符串方法
- java 字符串 字符查找_java之字符串中查找字串的常见方法
- 前端面试项目冲刺,京东金融Vue组件化实战
- python pip下载路径_Python pip install如何修改默认下载路径
- android x86 xp,XP系统安装安卓模拟器失败原因解决
- 使用Qgis按属性批量裁剪