以MUI框架为例,内容来自于MUI官网。

mui如何增加自定义icon图标

mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标;其次,mui中的图标并不是图片,而是字体,至于为什么使用字体图标而不是图片,相信web开发者多少都有所了解,简单列举几条:

  • 多个图标字体合成一个字体文件,避免每张图片都需要联网请求;
  • 字体可任意缩放,而图片放大会失真、缩小则浪费像素;
  • 可通过css任意改变颜色、设置阴影及透明效果;

在实际项目中,开发者难免会需要自定义图标,此时该如何操作呢?本文以阿里巴巴矢量图标库为例(同样的网站有很多,比如icomoon,欢迎热心用户分享其它平台的使用方法),介绍一种用户自定义图标的方法,假设我们要做一个电商项目,需要补充男装、女装、购物车三个图标,如下为分步实现操作;

登录

浏览器访问阿里巴巴矢量图标库官网,选择登录方式,可直接使用新浪微博账号登录;

搜索图标

在右上角搜索“男装”,会列出当前网站上的所有男装图标,如下:

选择自己喜欢的图标,点击,会添加到右上角的购物车中,如下:

同样的方式分别搜索选择女装、购物车图标,结果如下:

之后点击“存储为项目”,输入项目名字,例如“mui-icon-custom”,点击“存储”按钮后,会跳转到项目管理页面,如下图所示:

下载字体

点击“下载到本地”按钮,会将合并后的字体文件及自动生成的css全部下载,如下:

修改css

默认的css代码如下:

@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
} .icon-nanzhuang:before { content: "\e600"; } .icon-nvzhuang:before { content: "\e601"; } .icon-gouwuche:before { content: "\e602"; }

我们可稍作如下修改:

  • 为保证和mui目录结构统一,建议将字体文件放在fonts目录下,这样我们需要修改@font-face下得url属性;
  • 只兼容iOS和Android版本的话,我们仅需要ttf格式的字体即可,其它字体可以删除;同时,我们也仅需保留-webkit前缀语法,-moz前缀部分可以删除;

修改后的css代码如下:

    @font-face {font-family: "iconfont";
src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
} .iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
} .icon-nanzhuang:before { content: "\e600"; } .icon-nvzhuang:before { content: "\e601"; } .icon-gouwuche:before { content: "\e602"; }

集成mui

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下,然后即可在mui中引用刚生成的字体图标,我们以选项卡为例,代码如下:

    <nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-nanzhuang"></span>
<span class="mui-tab-label">男装</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-nvzhuang"></span>
<span class="mui-tab-label">女装</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-gouwuche"></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>

主要代码:将mui默认的icon(如mui-icon-home)替换成iconfont icon-nanzhuang,修改后预览效果如下:

在项目中增加自定义icon图标的更多相关文章

  1. 为BlueLake主题增加自定义icon图标

    一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫".& ...

  2. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  3. 在WPS绿色版中增加自定义皮肤

    在WPS绿色版中增加自定义皮肤小俊的博客:http://xiaojun911.com/WPS绿色版:http://xiaojun911.com/xiazai/469.html小俊精简的WPS2016 ...

  4. 详解如何在Laravel中增加自定义全局函数

    http://www.php.cn/php-weizijiaocheng-383928.html 如何在Laravel中增加自定义全局函数?在我们的应用里经常会有一些全局都可能会用的函数,我们应该怎么 ...

  5. VS Code项目中共享自定义的代码片段方案

    VS Code项目中共享自定义的代码片段方案 一.问题背景 项目中注释风格不统一,如何统一注释风格 一些第三方组件库名称太长,每次使用都需要找文档,然后复制粘贴 部分组件库有自己的Snippets插件 ...

  6. [转]通过继承ConfigurationSection,在web.config中增加自定义配置

    本文转自:http://www.blue1000.com/bkhtml/2008-02/55810.htm 前几天写了一篇使用IConfigurationSectionHandler在web.conf ...

  7. 认识CSS中标题引入icon图标

    前端之HTML,CSS(十一) icon图标 icon图标的使用 获取网站的中标题icon图标,以京东为例:在域名后添加/favicon.ico Enter打开 鼠标右键,图标另存为下载icon图标, ...

  8. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  9. 在VC项目中使用自定义资源

    这是我看到的比较实用性的技巧,分享给大家 一.前言 在VC环境中除了我们所常用的Dialog.Menu和Bitmap等标准资源类型之外,它还支持自定义资源类型(Custom Resource),我们自 ...

随机推荐

  1. 【单调队列DP+manacher】BZOJ2565-最长双回文串

    [题目大意] 输入长度为n的串S,求S的最长双回文子串T,即可将T分为两部分X,Y,(|X|,|Y|≥1)且X和Y都是回文串. [思路] 首先普通地求manacher,然后求出以每个位置为左端点和右端 ...

  2. 【Kruskal+dfs】BZOJ1016- [JSOI2008]最小生成树计数

    [题目大意] 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树. [思路] 拖欠了三个月整(?)的题目,搞出来弄掉了……本年度写的时候姿势最丑 ...

  3. ucenter创始人密码忘记了,修改方法

    简单的:1.在UCenter/data/下找到config.inc.php,打开找到下面2行代码: define('UC_FOUNDERPW', '3858cdf66b0794bfd435af8c0c ...

  4. IE主页被篡改为360导航终极处理办法

    不得不吐槽360真他妈是流氓至极,在不被用户许可的情况下直接修改用户浏览器默认主页,还不容易找到修改的地方. 以IE为例:我们将其首页设置为百度https://www.baidu.com/,终极处理办 ...

  5. NAND Flash大容量存储器K9F1G08U的坏块管理方法

    转: http://www.360doc.com/content/11/0915/10/7715138_148381804.shtml 在进行数据存储的时候,我们需要保证数据的完整性,而NAND Fl ...

  6. ejs循环实例

    ... //index page var items=[{title:"文章1"},{title:"文章2"}]; app.get('/',function(r ...

  7. node.js+mysql把数据显示到前端简单实例

    原以为数据查出来了,要展示是鸡毛蒜皮的事儿!谁知道,我弄了一天....我错就错在没把connection.query里面. 下面的例子是可以的了! 看过我之前文章的同学,应该很熟悉下面的代码,对!主要 ...

  8. js中setinterval 的相关使用

    1.setinterval 方法 setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式. 2.创建一个setinterval 方法 setInterval(s ...

  9. spring的6个不同的功能模块

    Spring自带的jar文件 Spring模块组成图 Spring的主要模块各自是核心Spring容器,spring的AOP模块,数据訪问与集成,web和远程调用,測试. 核心spring容器: 容器 ...

  10. [转]CodeSmith 基础教程

    本文转自:http://www.cnblogs.com/sorex/archive/2009/12/24/1631533.html 〇.            前言 最近两天自己写了个简单的ORM框架 ...