首页 > 教程 > 关键词 > MaterialDesign最新资讯 > 正文

Google Material Design的图标字体版本(Material icon font)

2015-06-02 16:23 · 稿源:设计达人
文章目录

今天设计达人网小编为大家分享的是Material Design图标字体版,有了这个Web端上使用图标就更加方便了。

除了多出图标字体素材外 ,还推荐了图标下载专题页,用户可以通过这个页面对图标单个下载,包括SVG、PNG、图标字体,相当方便。

使用教程

1. 打开Material icons下载页

2. 选择要下载的图标 (目前不能多选>_<)

3.选择要下载的格式即可

图标字体使用教程

【方法一】

STEP 1: 引入字体文件和样式文件,下面这个是直接引用google的字体托管文件,如果国内使用建议不要用托管的,会访问慢,把字体下载到自己的服务器上,详细看【方法二】

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>

STEP 2: HTML代码,在HTML标签上加入class=”material-icons”以及写上图标名称即可,如下:

<i class=”material-icons”>face</i>

【方法二】

如果你不想使用Google托管的CSS文件和图标字体,可以下载到本地。

STEP 1: 下载字体文件到本地

下载地址:https://github.com/google/material-design-icons/tree/master/iconfont

STEP 2 : 为你的CSS引入字体

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

STEP 3: HTML代码

<i class="material-icons">face</i>

更新详细的使用教程:http://google.github.io/material-design-icons/

网友热搜:

  • 相关推荐
  • 大家在看
  • 异度之刃2TIGER! TIGER!怎么玩 轻松五万分TIGER高分技巧

    异度之刃2中虎的人造异刃是需要你玩TIGER! TIGER!的小游戏来获取各种晶片的,很多玩家还不知道TIGER! TIGER!怎么上五万分,下面就来为大家详细的介绍一下攻略。

  • MySQL从库实用技能教程 巧用slave_exec_mode参数

    MySQL从库实用技能教程,巧用slave_exec_mode参数。​想必从库异常中断的情况不在少数,其中报错信息中 1032 及 1062 的错误占了不少的比重。

  • Windows Insider现启用Dev/Beta/Release Preview新名称

    ​从某种角度来说,Windows 10 的成功很大程度上归功于 Windows Insider 项目的良性循环。该项目不仅让用户提前体验各种新功能,也帮助微软构建了完善的测试系统和反馈机制。在成功运行超过五年之后,近日微软宣布对 Windows Insider 项目进行一些调整。

  • 联合国基金会致信感谢全球BIGOer

    近日,联合国基金会(United Nations Foundation)致信BIGO,对其成功举办的全球抗疫零时差演唱会表示祝贺,并对全球BIGOer的热心捐款表示感谢。今年五月,BIGO推出的全球线上 24 小时音乐筹款活动吸引了近 400 万人观看,汇聚了BIGO全球社区的力量,为新冠肺炎团结应对基金筹措善款。据悉,来自全球的 456 位主播经过层层选拔,最终选出分布在世界各个时区的近百位才艺达人参与了BIGO当天线上演唱会,为全球观众全天不间断地奉上了?

  • 焦点聚集DeFi,OKEx“项目小指南”

    近期,DeFi成为研究者及投资者重点关注的项目。6月29日,OKEx CEO Jay Hao在社群直播时表示:“OKEx一直都在关注DeFi的生态发展,早在19年末就对接MakerDao的DSR,以OKEx作为入口向用户提供DeFi的服务,同时OKEx也发起了自己的公链项目OKChain。”在提及DeFi安全性问题时,Jay Hao表示:“这并不会成为DeFi发展的瓶颈并且OKChain会重点发力在该领域,发展更加安全和高性能的DeFi生态服务。”DeFi是去中心化金融(decentralized finan

  • 黑曜石新作《Grounded》将玩家变成蝼蚁

    为防止玩家吓尿,黑曜石贴心地在游戏中设置了蜘蛛恐惧症缓解模式,滑动杆调整值越高,蜘蛛就越萌:开发单位表示外形变化只起示意作用,不影响实际体验及游戏难度。如果玩家依然无法战胜恐

  • 特斯拉Model Y开启国际交付

    DoNews 6月11日消息(记者 刘文轩)特斯拉(Tesla)周二正式开始首款Model Y车辆国际交付。Teslarati发现,已经有加拿大温哥华的客户在Instagram上展示他们购买的最新款特斯拉全电动汽车。该车主在Instagram分享了一张照片,照片中有一辆深蓝色Model Y被送到加拿大新车主的手中。特斯拉温哥华展厅顾问Charlie Wang也证实了这一消息,Model Y在6月开始在温哥华交货。Model Y长续航版本在加拿大的起步价为75990加元,约59720美元;性

  • 特斯拉弗里蒙特工厂Model 3总装线或有减少 一条改为Model Y总装线

    6月10日消息,据国外媒体报道,特斯拉位于加州弗里蒙特的组装工厂,在今年一季度已开始组装去年3月份推出的跨界运动型多用途汽车Model Y,部分幸运的消费者已经收到了他们此前预订的这一款电动汽车。特斯拉跨界运动型多用途汽车Model Y但从外媒最新的报道来看,弗里蒙特工厂的Model Y总装线,可能是此前用于组装Model 3的生产线。弗里蒙特工厂Model Y总装线此前可能是Model 3总装线,源自外媒获得的特斯拉CEO马斯克的?

  • Xbox智能分发是什么 Smart Delivery有哪些服务

    微软游戏业务部门Xbox在近日公布了一个全新的服务——智能分发(Smart Delivery),这一个将上一代主机游戏延续到次世代主机的服务,具体服务内容是什么呢,我们来一起看下。

  • 加快DevOps流程:CFO和CISO如何一起工作

    Covid-19大流行带来了新的常态。远程工作和视频会议从未像现在这样流行。直接的结果是,云计算也从未如此流行。但是,需要注意的是需要全速迁移的人员。DivvyCloud的杰里米·斯奈德(Jeremy Snyder)在4月告诉该刊物 时 说,“人们真的很擅长创造东西,但不善于自我清理”,而 上个月 ,Pariveda Solutions副总裁玛格丽特·罗杰斯(Margaret Rogers)警告说:“知道去哪里很少能旅途更轻松”。在当今时代,安全比以?

  • 特斯拉Model 3国产性能规格公布,Model3高性能全轮驱动版详细介绍

    特斯拉Model3 国产性能规格怎么样?6 月 28 日晚,特斯拉中国在官网发布了Model3 高性能全轮驱动版车辆的国标工况续航里程,续航里程测试结果为635km,百公里加速时间为3. 4 秒,时速可达 261 公里/小时。

  • 马斯克:特斯拉并未开发搭载100kWh电池组的Model 3/Model Y

    6月17日消息,据国外媒体报道,此前,有传闻称,特斯拉正开发一款搭载100kWh电池组的Model 3/Model Y。对此,该公司CEO埃隆·马斯克予以否认。此前,一名叫“Zeus M3”的黑客访问了特斯拉Model 3的“工厂模式”(Factory Mode)。他在推特上分享的截图显示,有一款Model 3或者Model Y似乎搭载100kWh的电池组。这名黑客的爆料引发了许多猜测,其中最有趣的是有关车辆续航里程增加的猜测。目前,Model 3配备的电池组最高

  • 如何打造品牌营销的“后浪”效应?业界大咖们聊high了

    “后浪”已成为新一代年轻人的代名词。如果把“后浪”推及品牌,它代表了快速迭代的新技术、新创意,以及以“后浪”思维经营品牌、大胆破局的企业。数据智能时代,“后浪”奔涌而来。6月22日,西溪论数·2020数据智能高峰论坛在杭州西溪圆满举行。本次大会由个灯母公司——数据智能A股上市企业每日互动(个推)主办,“论数”内容涵盖数据智能尖端技术、应用场景、发展生态、未来趋势等热点。在主题为“数字:品牌营销的后浪”的圆

  • openEuler开源社区成立Ceph SIG

    「中国,深圳, 2020 年 6 月 16 日」今天,openEuler开源社区(以下简称“openEuler社区”)正式成立Ceph SIG(Special Interest Group 特别兴趣小组),完善openEuler操作系统在分布式存储场景的适配。openEuler社区参与者和用户可获得由专业存储团队维护的稳定的Ceph版本构建分布式存储系统,并通过openEuler社区获得技术支持。 Ceph是一个具备高性能、可靠性和可扩展性的分布式存储解决方案,可以同时提供块、文件和对象三种服务

  • Zoom Video收盘创下新纪录 涨幅8.88%

    避难所股票周一上涨,跑赢大盘,由于国内外新出现的COVID-19案件再度兴起,Zoom Video Communications Inc.的股票收盘创下新纪录。变焦视频 US:ZM 周一,该股收于创纪录的239.02美元,涨幅8.9%,此前曾创下历史新高239.59美元。同时,标准普尔500指数 US:SPX 收盘上涨0.8%,科技含量高的纳斯达克综合指数 US:COMP 收盘上涨1.4%,从周一盘初的跌势中反弹。在美国,佛罗里达州和德克萨斯州等州的病例数再度飙升,导致COVID-19

  • OKEx旗下OKChain发布月报,OpenDEX进展喜人

    6 月 10 日,OKChain发布月报显示,OKChain公链技术方面,其测试网已升级至0. 10 版本,新增超级节点竞选及一票多投等功能。自 20018 年OKEx正式公布OKChain以来,作为全球顶级加密货币交易平台的明星产品,无论是首创的交易所公链双币系统,还是持续扩展的公链生态用户,一举一动都获得了市场的大量关注。OKChain是由OKEx研发推出的一条去中心化的、开源的公链,其目标是创建全世界任何人都能高效使用的公链系统,推动区块链技术?

  • DEX交易额较去年同期5倍增长,OKEx CEO Jay Hao 表示DEX与CEX不是竞争关系

    加密数据网站Dune Analytics数据显示,2020年上半年DEX平台的总交易额达到51亿美元,是2019年同期的5倍。而仅在今年6月,DEX的单月交易额就超过15亿美元。由此可见,投资者对于DEX的接受程度在不断地提高,越来越多的人希望通过DEX交易获取收益。那么DEX将如何发展的?DEX与CEX又有什么样的区别和优势?未来又会如何? OKEx分析师将会为大家进行介绍。中心化的数字货币交易所(CEX),实际上,至少从用户角度看数字货币交易所和银?

  • iGame《守望先锋》今晚开战:看比赛就能抢爆品显卡

    凭借优秀的操作角色设计、竞技性,《守望先锋》一直都是全球电竞比赛中观赏度、关注度非常高的项目,也催生了许多优秀的电竞选手、俱乐部战队。现在就有一次竞赛的《守望先锋》比赛等你来观,还

  • 外媒:字节跳动将关闭火山小视频海外应用Vigo

    6月15日消息,据外媒报道,即将关闭火山小视频海外版Vigo(Vigo Video和Vigo Lite)并敦促其用户迁移到TikTok。对此,字节跳动向媒体回应称,此举系正常的业务调整。6月初,有消息称,字节跳动将逐步关闭海外新闻应用TopBuzz。当时,字节跳动对外回应称,这是业务的正常调整。公开资料显示,Vigo Video于2017年在海外上线,进军泰国、印度、巴西等国家和地区,最新公告中,Vigo Video在巴西、中东市场的服务已关闭。今

  • 还在为字体版权发愁?字体超市:一个超良心的商用字体平台

    近几年不管是设计公司、自媒体还是个人网店,字体侵权问题屡见不鲜。仅以“微软雅黑”为例,百度搜索出来的相关侵权信息就多达 38100 条结果。2007 年 8 月,北大方正状告美国暴雪娱乐有限公司,称其侵犯方正兰亭字库中方正北纬楷书、方正剪纸等 5 款方正字体的著作权,索赔4. 08 亿元。2008 年,北大方状告广州宝洁有限公司,称“飘柔”字体涉侵权索赔 134 万元。2012 年,热门影片《失恋 33 天》,因片头字幕、短信字幕等使用了?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天