首页 > 教程 > 关键词 > 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/

网友热搜:

  • 相关推荐
  • 大家在看
  • Intel官宣Thunderbolt 4接口:Tiger Lake首发、40Gpbs速率

    今年初的CES展会上,Intel宣布了全新一代的Thunderbolt 4接口,首发于10nm+工艺的Tiger Lake处理器。现在Intel正式发布了Thunderbolt 4标准,速率跟Thunderbolt 3一样还是40Gbps,但是规格全面增

  • 火币宣布成立DeFi实验室,联合全球社区构建DeFi生态

    8 月 3 日,全球知名的数字经济领军企业,火币集团宣布成立火币DeFi实验室。 火币DeFi实验室专注于DeFi(去中心化金融)的研究、投资、孵化、以及生态的建设。计划在未来通过与全球加密领域和DeFi社区合作,构建更好的金融系统。 火币集团创始人兼CEO李林表示:“作为全球知名的数字经济领军企业,我们的使命是让财富更自由,让全球至少一亿家庭拥有数字资产,无论是DeFi还是CeFi。加入全球DeFi生态是一件激动人心的事,同时,也很?

  • 微软整治清理工具CCleaner:Windows Defender标记有害且直接拦截

    一款曾被喻为神器的经典软件,遭微软痛下杀手,它就是CCleaner。这次用户发现,CCleaner被Windows Defender标记为PUA(Potentially Unwanted Application,可能有害的应用程序)并给予拦截,威

  • 定位低于Model 3!特斯拉全新车型或将命名Model 2

    7月29日消息,有媒体报道称,特斯拉将推出全新的入门车型,新车定位将低于Model 3, 并且可能会在特斯拉位于德国的超级工厂(建设中)率先投产。值得一提的是,在此之前,特斯拉CEO马斯克在第二

  • DeFi总交易量单月激增98%,OKEx解读CeFi与DeFi的分工和融合

    7 月 26 日消息,CryptocurrencyChart数据显示,过去一个月,比特币、以太坊、莱特币等主流加密货币的总交易量下降24%。基于以太坊的DeFi生态扩展迅速,总交易量在一个月内激增98%。DeFi支持者Imran Khan称,“比特币和DeFi将同步增长,我预计宏观变化将有力推动比特币的飞轮,DeFi是一个次飞轮。加密货币行业的这两个部门服务于两个不同的‘老板’:比特币是为了夺取货币主权而建立的,而DeFi则是为了夺取传统银行业。”这与 OKEx

  • iG战胜TES,赛后采访宝蓝表示针对阿水就完事了!

    斗玩网原创:继“LPL春晚”之后,最近LPL又新增了一档新节目,叫做“LPL忍界大战”,对阵的双方分别是IG和TES战队,目前两队都已经拿到季后赛的资格,但为了争夺前两名排名,双方都志在拿下每一场比赛。同时这一场比赛还有另外一个看点,就是TES的adc选手阿水将首次在正式比赛中遇上自己的老东家IG战队,面对曾经的队友和好伙伴,双方在比赛场上却没有留一丝情面。

  • DeFi年化收益比去年增长近150%,OKEx详解“幕后推手”DEX

    据Token Terminal 数据显示,DeFi年化收益比去年增长近150%,并于今天达到4200万美元。其中,每周变化达到有史以来第二高,7月连续两周增长50%。增长幅度最大的两大类别为DEX和提供流动性挖矿的协议。由此可见, DEX已经成为DeFi获取收益的重要途径之一。那么DEX将如何发展的?DEX与CEX又有什么样的区别和优势?未来又会如何? OKEx分析师将会为大家进行介绍。去中心化交易所(DEX)的核心部件是部署在区块链上的智能合约, 与传?

  • LPL忍界大战落幕,iG战胜TES,阿水被疯狂针对!

    7月26日晚上,LPL夏季赛迎来了一场关键的对阵,对阵的双方分别是IG和TES两队,在赛前官方为这场比赛预热,被宣传为“LPL忍界大战”,比赛的过程也没有让大家失望,其激烈程度甚至堪比一场季后赛级别,最终IG以2:0战胜TES拿到比赛胜利。

  • 特斯拉开放Model S和Model X老款车型付费升级信息娱乐系统

    今日,特斯拉宣布开放付费升级信息娱乐系统,适用车型为 2018 年 3 月之前生产的Model S和Model X。升级服务的价格为 25550 元,如不再配置FM收音机,可享受折扣价格 21500 元。

  • DeFi 总锁仓金额突破36亿美元, OKEx赋能DeFi大盘点

    据DappBirds DeFi Data专题数据显示,DeFi总锁仓金额突破36亿美元,DeFi中锁定资产总价值达36.71亿美元,较昨日上涨8.77%,其中Maker,Compound,Aave,Synthetix,Curve分别以6.44亿美元,5.71亿美元,4.78亿美元,4.37亿美元,2.88亿美元位列前五名。DeFi作为数字资产行业内的借贷平台,近期以来始终受到业内以及投资者的热烈关注,其项目的市场价值连日来也快速增长。不少投资者都将投资目光落在其项目上。DeFi是去中心化金融(d

  • DeFi总锁仓金额突破36亿美元, OKEx赋能DeFi大盘点

    据DappBirds DeFi Data专题数据显示,DeFi总锁仓金额突破36亿美元,DeFi中锁定资产总价值达36.71亿美元,较昨日上涨8.77%,其中Maker,Compound,Aave,Synthetix,Curve分别以6.44亿美元,5.71亿美元,4.78亿美元,4.37亿美元,2.88亿美元位列前五名。DeFi作为数字资产行业内的借贷平台,近期以来始终受到业内以及投资者的热烈关注,其项目的市场价值连日来也快速增长。不少投资者都将投资目光落在其项目上。DeFi是去中心化金融(

  • DeFi中锁定资产总价值达40.34亿美元,OKEx为何钟情DeFi?

    2020年币圈热点四起,DeFi无疑是最闪耀的一个。自从今年6月中旬COMP代币上线引爆币圈以来,越来越多的DeFi项目如雨后春笋般相继崛起。据金色财经消息,DeBank数据显示,7月29日DeFi中锁定资产总价值达40.34亿美元,Maker以10.1亿美元排在首位、Synthetix锁定资产总价值为7.75亿美元、Compound锁定资产总价值5.34亿美元。*注:总锁仓量(TVL)是衡量一个DeFi项目使用规模时最重要的指标,通过计算所有锁定在该项目智能合约中的ETH及

  • Win10资源管理器、Defender、沙盒等齐遇BUG:微软正修复

    按照Intel的建议,电脑系统升级间隔越久越好,这样才能获得比较明显的性能改进体验。不过,对于Win10来说,由于其出BUG的频率过高,所以用户也不得不接受频繁打补丁了。日前,微软确认Windo

  • 专为老车型 特斯拉将为Model S和Model X开放信息娱乐系统升级

    7月24日消息,特斯拉宣布即将开放付费升级信息娱乐系统,以提供更流畅的触控感受、更佳的视觉体验。事实上,2018年3月至今生产的特斯拉车辆均配备最新信息娱乐系统,所以此番升级服务是专门针

  • DeFi借贷总量达12.05亿美元,OKEx徐坤看好DeFi前景

    据DeBank数据显示,当前DeFi借贷总量约为12.05亿美元。其中,Compound平台约9.68亿美元,占总体份额80.35%,Maker平台约1.86亿美元,占总体份额15.46%,Aave平台约2931万美元,占总体份额2.43%。今年由Compound引领的DeFi成了区块链领域新的爆发点,所谓DeFi,就是将传统金融搬到区块链网络里,但相比传统金融,它通过区块链实现了去中心化,也就是去掉了中间人的角色,从而降低了中间环节带来的巨额成本。在近日巴比特举办的“202

  • ESPN全球“毒奶榜”出炉,IG七连胜成功登顶

    斗玩网原创:英雄联盟全球各大联赛都进入到了最后的常规赛收官阶段,各大赛区的季后赛队伍也将在这几天内确定。ESPN作为全球战队战力排行榜的参考指标,虽然一直被玩家们吐槽十分不靠谱,尤其是夹带了很多个人主观看法,但作为为数不多的榜单,还是值得大家看一看。

  • 跨界打造洗脑神曲 BIGO在俄罗斯成功破圈

    近日,俄罗斯歌手T-Killah 与BIGO旗下全球短视频社区Likee合作发布了全新单曲及MV《维他命T》。在MV中,洗脑的旋律与Likee社群欢乐活泼、青春肆意的特点相结合,释放出奇妙的化学反应。MV一经发布便获得了俄罗斯粉丝的追捧,不到五天就在全球获得了150万次播放。T-Killah是俄罗斯当红Rapper及年轻世代偶像,在社媒平台拥有500万活跃粉丝。这次主打歌曲《维他命T》与其新专辑同名,是T-Killah计划在俄罗斯疫情隔离解禁后发布的一首主打夏?

  • IG处罚南风5万,因直播时发表不恰当言论

    7月14日晚,IG战队英雄联盟分部发布一份公告,对战队辅助选手苏志林(ID:Southwind)处罚5万,原因是他在7 月 11 日直播中出现了不文明用语表达和不恰当言论,造成了不良影响。

  • 动物之森烟火大会浴衣Code码 动物森友会烟火大会浴袍code推荐

    动物森友会在最近开启了烟火大会,大家可以穿浴袍去观看烟火大会了,很多玩家还不清楚有什么情况,下面就来为大家详细的介绍一下。

  • DeFi代币总市值超过100亿,OKEx上线DMG和CELO持续助力DeFi赛道

    2020年以来,DeFi成为投资者聚焦关注的项目,据DeFiMarketCap数据显示,当前去中心化金融(DeFi)代币的总市值已超100亿美元,现报约100.490亿美元,整个DeFi市场的成长速度非常惊人。各大交易平台均助力DeFi发展。OKEx作为全球领先的数字资产交易平台也不例外。近日,OKEx发布公告称,将开放DMG/USDT和 CELO/USDT、CELO/BTC三个交易对。在DeFi持续火热的当下,一天上线两大DeFi代币,是一则利好消息。首先为用户提供了更多投资盈?

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