mui-添加自定义图标(彩色)

原创 2018年04月16日 17:26:18

mui-添加自定义图标(彩色)

   效果图展示
   未修改:
        
   修改后:

       

步骤一、 

      1.登录网站(阿里巴巴矢量图图库)  网站:http://www.iconfont.cn/

      2.使用自己的新郎微博登录

      

     3.选择自己喜欢的图标,点击添加购物车

     

     4.选择完毕后,图标管理--->我的项目--->下载至本地

   

     5.输入项目名字,例如“mui-icon-custom”,并下载至本地

     6.解压此文件

步骤二、

    1.找到iconfont.js,放置项目js文件下

          

    2.在HTML中引入引入js文件

      <script src="js/iconfont.js"></script>

    3.在HTML中添加通用css代码

      <style type="text/css">
        .icon {
          width: 1em; height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }

       </style>

     4.添加图标代码

           <svg class="icon" aria-hidden="true">
                   <use xlink:href="#icon-diannaoguzhang"></use>
           </svg>
           <div class="name">电脑故障</div>

           <div class="fontclass">#icon-diannaoguzhang</div>

    注:icon-diannaoguzhang 为图标的代码,点击复制代码即可

        

     5.完成

     

    

[VC]基于对话框程序,自定义工具栏(支持真彩色图标,可添加文字)

转载自 ewook最终编辑 ewook应该是一个老生常谈的问题了,仍然决定写一写的原因是:在网上搜一搜,讲得有效易懂的还真没发现(可能是大虾们都懒得去写。。。)动机:传统的VC工具栏只支持16色的图标...
  • lovey_carolin
  • lovey_carolin
  • 2011-05-31 11:05:00
  • 982

MFC使用ToolBar工具栏添加真彩色图标

平常我们在开发软件中,会经常用到ToolBar,但是如果只是一般的ToolBar颜色是16色,对于那些ToolBar有高要求的软件就显得很尴尬了,这时候我可以通过利用CImageList来为我们的To...
  • nonecode
  • nonecode
  • 2012-10-22 13:59:53
  • 6749

BootStrap自定义小图标

http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
  • w405722907
  • w405722907
  • 2017-07-04 16:58:21
  • 1531

为bootstrap添加更多自定义图标

为 Bootstrap 添加更多自定义图标 Twitter Bootstrap 真是前端开发的瑞士军刀,作为基于 HTML,CSS 和JavaScript 的简洁灵活的前...
  • mengxiangfeiyang
  • mengxiangfeiyang
  • 2015-04-23 17:50:37
  • 9521

MUI实战开发第四集--如何增加自定义icon图标

mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标;其次,mui中的图标并不是图片,而是字体,至于为什么使用字体图标而不是...
  • myfirtyou
  • myfirtyou
  • 2015-06-11 09:52:03
  • 2852

ionic2 使用自定义icon

ionic2 使用自定义icon,设置tab选中的颜色值
  • u010564430
  • u010564430
  • 2017-03-14 10:40:03
  • 2003

ionic自定义图标

最近在做ionic移动开发的一个小东西,作为一个外貌协会,为了追求界面美观,每个icon都是要找半天,找到最合适最好看的。这是一件很浪费时间的事。 首先自己去设计图标太浪费时间其次找现成的图标很多...
  • sinat_21274091
  • sinat_21274091
  • 2016-10-05 23:00:44
  • 2720

Ionic2像使用字体图标一样使用png图标等

在前面写了一篇文章是关于在ionic中使用iconfont的,但是在实际的开发过程中会发现,前端设计的很多图标都是png或者jpg的,无法像使用字体图标一样进行使用。 但是我们一般使用png这样的图...
  • u010730897
  • u010730897
  • 2017-08-09 11:10:13
  • 454

向 echarts图标工具栏toolbox中加入自定义图标/图形

向 echarts图标工具栏toolbox中加入自定义图标/图形 echarts
  • singsingasong
  • singsingasong
  • 2017-08-16 17:00:10
  • 1003

为 Bootstrap 添加更多自定义图标

转  http://www.lovelucy.info/custom-icons-for-twitter-bootstrap.html
  • fendou4533
  • fendou4533
  • 2014-06-25 15:19:21
  • 1244
收藏助手
不良信息举报
您举报文章:mui-添加自定义图标(彩色)
举报原因:
原因补充:

(最多只允许输入30个字)