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

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

举报

  • 相关推荐
  • 模型能力卷不过Google、快手,但这家视频生成创企却可能最先赚到钱?

    去年4月,我们曾经在《这个 AI 赛道,一个月内融资4笔,一大半的创始人是华人》选题中观察过 AI 视频赛道,彼时赛道 Top 级玩家还是 Pika、Pixverse、Haiper 等华人创企。

  • 探索AI时代出海新范式!impact.com荣获TopDigital创新营销奖「年度营销技术公司」

    2025年7月1日,impact.com在第十三届TopDigital创新营销盛典上荣获"年度营销技术公司"大奖。该平台凭借技术能力、商业影响和全球化战略的综合表现获得认可,其AI技术正深刻改变品牌营销工作方式,尤其在效率提升与流程优化方面成效显著。impact.com通过智能推荐、智能审批等功能,将AI能力引入合作伙伴管理核心环节,帮助出海企业构建全球化合作网络。大中华区总裁Jennifer Zhang表示,AI不是替代营销人,而是释放其判断力与创造力。作为全球合作伙伴经济核心引擎,impact.com已服务众多中国出海品牌,未来将继续深化AI在营销管理平台的应用。

  • iPad为何不运行macOS 苹果高管:macOS未对触摸屏做优化

    iPadOS 26带来了全新的应用视窗、下滑式菜单栏等功能,让iPad的操作体验更接近Mac,但苹果始终未让iPad运行macOS系统,其背后原因正式揭开。 苹果公司软件工程负责人Craig Federighi接受采访时称,iPadOS 26的新特性在生产力与简洁性之间取得了很好的平衡,macOS系统从未对触控屏做优化,我们要保留iPad最本质的简洁性,如果强行移植macOS,iPad将丧失其触控设备的独特价值。 Craig Fed

  • macOS 26液态玻璃“致敬”Windows Vista:微软罕见贴脸嘲讽

    苹果正式发布了全新的macOS 26操作系统,其中采用了液态玻璃”(Liquid Glass)设计语言。 不有有不少人指出,这一设计与2006年Windows Vista的毛玻璃(Aero Glass)设计极为相似。 此前通常避免在竞争对手发布新产品时发表评论的微软,日前也在官方Instagram账号上发布了一段视频,并称就把它放这了”,调侃苹果的这一设计致敬”了Windows Vista。 微软发布的视频中,使用了#WindowsAer

  • DigitalOcean 携手 AMD 推出 AMD Instinct MI300X GPU Droplet,加速 AI 创新

    DigitalOcean与AMD达成合作,将推出搭载AMD Instinct MI300X GPU的云服务器,支持AI/ML/HPC工作负载。该GPU具备192GB HBM3内存,能完整加载数十亿参数模型,显著提升训练和推理效率。服务定价每小时1.99美元起,支持1-8个GPU配置,并与Kubernetes无缝集成。未来还将推出MI325X GPU,并面向中国市场提供服务。此次合作旨在为开发者提供经济高效的AI开发解决方案,简化云端GPU部署流程。

  • 曝华为Mate XTs九月登场:鸿蒙最强三折叠

    博主厂长是关同学爆料,华为Mate XTs 9月份到来,这是华为Mate XT的小改款,能力大大提升。 据悉,华为Mate XTs将搭载全新的麒麟芯片,同时提升影像和耐用性,出厂搭载原生鸿蒙,是鸿蒙史上最强三折叠屏。 在去年9月,华为推出了首款三折叠屏Mate XT非凡大师,开创了智能手机新形态,这款旗舰一经发布就引发关注,有数百万人参与预约,首销期间在黄牛渠道更是溢价数万元�

  • 《原神》鸿蒙版开启招募测试:支持华为Pura 80、Mate 70等系列机型

    米哈游午间宣布,鸿蒙版《原神》今日12:00开启测试服玩家招募。 据介绍,为保证未来后续版本与鸿蒙系统的适配,此次测试招募仅面向鸿蒙操作系统的旅行者开放。 此次玩家库招募针对后续测试版本,绝大部分内容都处于调整中状态。 官方表示,考虑到测试服的内容泄露可能会造成部分旅行者对正式版本内容的误解,破坏旅行者们正式服的体验。 因此需要参与玩家库的�

  • AI时代的营销答卷:淘宝天下摘得TopDigital桂冠

    淘宝天下凭借AI技术在营销领域的创新实践,在第十三届TopDigital创新营销盛典上斩获两项大奖。其获奖案例《淘宝蛇年"一起上春晚"云参演证互动传播》通过AIGC技术生成个性化"云参演证",结合明星联动和裂变式传播策略,实现超45亿曝光量,累计生成1.18亿张参演证,重塑了传统春节文化互动模式。同时,与神州租车合作的小米SU7 Ultra上新营销案例,通过头部KOL传播和社交化内容裂变,达成2.36亿+曝光量,获"社会化营销"铜奖。淘宝天下已布局AI驱动的全链路营销解决方案"淘天智家平台",支持从创意生成到多媒介内容生产的全流程,持续推动数字营销创新。

  • iPad、MacBook、Apple Watch京东PLUS享无门槛9折优惠 至高再减500元!

    京东618推出Apple产品多重优惠:iPhone 16系列最高直降2000元,叠加消费券后512GB版低至7599元起;128GB版享国家补贴后仅5499元起,以旧换新可再减1200元。iPad Air/MacBook Air等享PLUS会员9折叠加国家补贴,如11英寸iPad Air到手价3369元。Apple Watch S10到手1787元起,AirPods4会员价1019元起。所有产品现货发售,优惠券每日10点限量抢,搜索"苹果惊喜券"直达活动页面。

  • 小米15迎来首个安卓大版本更新:安卓16 Beta版上线

    今天,小米15迎来安卓首个大版本更新,基于安卓16定制的澎湃OS 2定向内测版正式上线,版本号为OS2.0.230.6.WOCCNXM Beta,安装包大小是7.3GB。 新版澎湃OS优化了部分场景动效策略,提升系统流畅度;同时新增双指上滑唤起自定义无障碍功能的快捷方式。 需要注意的是,这次更新是安卓跨版本升级,建议用户提前备份个人数据,部分第三方应用可能没有适配安卓16,这一点需要注�