用字体在网页中画Icon图标
第一步,下载。IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下。fonts文件夹内有四种格式的字体文件:
注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示字体图标,必须同时引入这些字体文件。
第二步,使用@font-face规则。在样式文件中自定义字体
@font-face{font-family:'imooc-icon';/*自己取的名称*/src:url("fonts/icomoon.eot") format("embedded-opentype"),/*后缀为eot,format对应的字符串*/url("fonts/icomoon.ttf") format("truetype"),url("fonts/icomoon.woff") format("woff"),url("fonts/icomoon.svg") format("svg");font-weight:normal;font-style:normal;
}
第三步,显示字体图标。比如要在span标签上显示字体图标,首先打开之前下载的解压后的字体文件夹,点击里面的demo.html,获得图标编码。
在span标签里写进 &#x图标编码; 如右图:
并在样式里设置该span标签的字体为我们自定义的字体名称。
最后,优化和兼容。为了兼容IE,对@font-face规则作出改进。
为了获得更好的显示效果,需要在span样式里再加入一些代码。
接下来,介绍第二种方式使用字体图标。
用字体图标的名称作为类名,并在相应标签上添加这个类名。代码片段如下:
.icon-film:before{content:'\e913';/*注意这里用的是反斜线*/
}
<span class="icon-film"></span>
注:在下载字体图标时,可以点击网站顶部preferences按钮进行参数设置,下载完后,打开里面的css文件,有可供直接使用的代码。
参考资料:慕课网-用字体在网页中画Icon图标
转载于:https://www.cnblogs.com/xiayi/p/5950927.html
用字体在网页中画Icon图标相关推荐
- 在网页中画ICON图标
相信很多前端开发人员都做过导航栏图标,其实很多网站的导航栏图标使用的技术无外乎两种,CSS Sprite雪碧图和字体图标.下面就带大家一起熟悉一下这两种在网页中画ICON图标的方式. 一.使用CSS ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源 IconMoon网站 https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮 ...
- 在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...
- 在网页中实现icon小图标的几种方法
总所周知,网页的美观程度往往比这个网页的使用程度更重要,因为它能直接吸引用户的眼球.在网页中,小图标在美工方面的作用更是不言而喻,小图标种类多样,给人以直观的反映.在现有的网站中,99.9%的网站都采 ...
- 在Android Studio中使用icon图标
在Android中使用icon图标 下载ttf文件 进入iconfont.cn,并登录选择自己要的icon图标 选择添加入库,点击自己的库 选择下载代码 引用 新建Assets文件夹 将下载的icon ...
- vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标 一. 在项目中引入阿里云icon图标 二. 在data中定义icon图标列表 三. 在下拉框中显示icon图标 四. 在列表中显示icon图标 五. 在el-c ...
- UI设计中的ICON图标的区别是什么
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 1. 什么是图标 那到底什么是图标呢?用一句最简单的话来说,图标就是一个符号,一个代表某个对象的符号,一个象征性的符 ...
- 手把手教你在vue中使用icon图标,附demo代码
icon图标的使用 START icon图标的使用,对于番茄我来说,算是一个痛点吧.写这篇文章之前,也看了不少别人有关图标使用的博客.想了很久,还是想自己写一篇属于番茄我自己的一篇图标相关的博客.一来 ...
- 微信小程序项目中使用icon图标
效果: 步骤: 1.先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2.在小程序中使用 新建一个view,在上面加一个class,复制icon名字上去即可,注意 ...
最新文章
- python3读写csv
- Java 应用中的日志
- python前端开发之准备开发环境(建议收藏)
- oracle的scn增量备份,Oracle技术之利用scn增量备份实现数据库增量恢复
- php+数组存放文件名_php将数组存储为文本文件的三种方法
- 大白话5分钟带你走进人工智能-第31节集成学习之最通俗理解GBDT原理和过程
- 缓存中间件-mac下Memcache 安装
- lucene可用中文分词IKAnalyzer,maven pom下载代码及配置文件
- Android国际化-补充
- matlab数据栅格化,新手求卫星降水数据CMORPH_V1.0数据完整处理方法,有matlab打开的代码但是不会处理...
- 软件测试必问必背面试题
- 软件项目管理案例教程(第三版)习题及答案(适用于工程项目管理课程)
- 用Raspberry Pi作AirPlay服务端
- 机器学习算法对比分析(转载)
- Gradle基础教程
- 深度学习在训练时对图片随机剪裁(random crop)
- osgEarth示例分析——osgearth_graticule
- Python版股市情感分析源代码,提取投资者情绪,为决策提供参考
- Java构建HashCode相同字符串算法
- ubuntu系统声音_Ubuntu Linux系统提示声音设置
热门文章
- Silverlight实用窍门系列:35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...
- 企业网站推广方案详解
- 2006_06_16_阿根廷的节日
- Git入门第一集!(Git的下载地址、下载资源)
- 常用的Mybatis-Plus方法,让你的数据库增删改查(CRUD)一键实现
- java百度地图地名定位地址_百度地图定位显示省市区街道名称,非常实用
- es修改排序_java 如何实现ElasticSearch自定义排序
- MATLAB实现直方图均衡化与规定化
- int main( int argc , char *argv[] , char *envp[] )中参数解说
- 组合框CComboBox响应函数