最简单的使用方法

  1. 引入

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

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

    对于不支持连字的浏览器,请回退到使用数字字符引用指定图标: <i class="material-icons"></i>

  3. 尺寸,颜色

    /* Rules for sizing the icon. */
    .material-icons.md-18 { font-size: 18px; }
    .material-icons.md-24 { font-size: 24px; }
    .material-icons.md-36 { font-size: 36px; }
    .material-icons.md-48 { font-size: 48px; } /* Rules for using icons as black on a light background. */
    .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
    .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* Rules for using icons as white on a dark background. */
    .material-icons.md-light { color: rgba(255, 255, 255, 1); }
    .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

    使用:<i class="material-icons md-48">face</i>

web项目如何使用Material Icons的更多相关文章

  1. Python-Flask搭建Web项目

    最近因项目需要,学习了用flask搭建web项目,以下是自己的使用感悟 Flask框架结构 static:存储一些静态资源 templates:存储对应的view app.py:涉及到页面的跳转,以及 ...

  2. Flutter随笔(二)——使用Flutter Web + Docker + Nginx打造一个简单的Web项目

    前言 Flutter作为一个跨平台UI框架,功能十分强大,仅用一套代码便能编译出Android.iOS.Web.windows.macOS.Windows.Linux等平台上的应用,各平台应用体验高度 ...

  3. java Web项目创建之一(普通java web项目的创建与发布)

    1.创建新的web项目 file->new_>Dynamic Web Project(如图) 或file->new->Project->Web->Dynamic W ...

  4. ASP.NET MVC开发:Web项目开发必备知识点

    最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...

  5. Velocity笔记--使用Velocity获取动态Web项目名的问题

    以前使用jsp开发的时候,可以通过request很轻松的获取到根项目名,现在换到使用velocity渲染视图,因为已经不依赖servlet,request等一些类的环境,而Web项目的根项目名又不是写 ...

  6. Springboot搭建web项目

    最近因为项目需要接触了springboot,然后被其快速零配置的特点惊呆了.关于springboot相关的介绍我就不赘述了,大家自行百度google. 一.pom配置 首先,建立一个maven项目,修 ...

  7. 一个简单的网站web项目的详解

    有不对的术语,或者不好理解的部分,欢迎大家批评指正,谢谢大家! 近期做的网站web项目,实现登录功能,查询功能.首先把这个项目分为几个模块来处理,当前用户模块,历史用户模块,历史记录模块,数据库模块, ...

  8. 从myeclipse导入eclipse,不能识别为web项目(java项目转为web项目)

    1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存:         ...

  9. 【.net深呼吸】非 Web 项目使用缓存

    从.net 4 开始,非web项目也可以使用缓存技术,故曰:.net 4 乃框架成熟之标志也. 对于缓存嘛,耍过 ASP.NET 的伙伴们肯定知道,这么说吧,就是将一些使用频率较高的数据放于内存中,并 ...

随机推荐

  1. Qt for Android开发总结

    近段时间,本人使用Qt5.3.0开发了Android应用,由于官方资料较少,在此记录开发过程遇到的问题及解决方法 1.Android平台的视频播放,只能使用qml的MediaPlayer 2.qml中 ...

  2. chrome扩展程序----域名助手

    音乐分享: Future Islands - <Aladdin> 中年大叔的抖腿新专辑<The Far Field> ————————————————————————————— ...

  3. Python爬虫基础之BeautifulSoup

    一.BeautifulSoup的基本使用 from bs4 import BeautifulSoup from bs4 import SoupStrainer import re html_doc = ...

  4. javascript中new Date()存在的兼容性问题

    问题:通过new Date()创建的时间对象在Chrome能正常工作,但在IE浏览器却显示NaN 代码: var time = new Date(date + ' 00:00:00'); //NaN ...

  5. mysql 字符串去掉指定字符

    如:在每一列meeting_persons的现有内容之上,去掉15112319字符串 ','')

  6. Python3学习笔记十三

    1.   css 老师的博客:http://www.cnblogs.com/yuanchenqi/articles/6856399.html 选择器:找到想要改变的标签 css的功能:渲染和布局 2. ...

  7. samba服务器一次排错

    在全局配置完,可用.配置区域配置的时候,添加一个共享的文件夹时, 使用testparm 命令去检查配置.发现path路径无法正确读出.在window上去访问,显示无法正常访问. 修改path的位置,放 ...

  8. SpringMVC源码分析-400异常处理流程及解决方法

    本文涉及SpringMVC异常处理体系源码分析,SpringMVC异常处理相关类的设计模式,实际工作中异常处理的实践. 问题场景 假设我们的SpringMVC应用中有如下控制器: 代码示例-1 @Re ...

  9. Webpack3 从入门到放弃

    我是网络的搬运工,具体请看:Webpack 3,从入门到放弃

  10. typora画图

    https://steemit.com/utopian-io/@jubi/typora-typora-tutorial-exquisite-graph https://support.typora.i ...