在项目中增加自定义icon图标
以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图标的更多相关文章
- 为BlueLake主题增加自定义icon图标
一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫".& ...
- MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标
MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...
- 在WPS绿色版中增加自定义皮肤
在WPS绿色版中增加自定义皮肤小俊的博客:http://xiaojun911.com/WPS绿色版:http://xiaojun911.com/xiazai/469.html小俊精简的WPS2016 ...
- 详解如何在Laravel中增加自定义全局函数
http://www.php.cn/php-weizijiaocheng-383928.html 如何在Laravel中增加自定义全局函数?在我们的应用里经常会有一些全局都可能会用的函数,我们应该怎么 ...
- VS Code项目中共享自定义的代码片段方案
VS Code项目中共享自定义的代码片段方案 一.问题背景 项目中注释风格不统一,如何统一注释风格 一些第三方组件库名称太长,每次使用都需要找文档,然后复制粘贴 部分组件库有自己的Snippets插件 ...
- [转]通过继承ConfigurationSection,在web.config中增加自定义配置
本文转自:http://www.blue1000.com/bkhtml/2008-02/55810.htm 前几天写了一篇使用IConfigurationSectionHandler在web.conf ...
- 认识CSS中标题引入icon图标
前端之HTML,CSS(十一) icon图标 icon图标的使用 获取网站的中标题icon图标,以京东为例:在域名后添加/favicon.ico Enter打开 鼠标右键,图标另存为下载icon图标, ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- 在VC项目中使用自定义资源
这是我看到的比较实用性的技巧,分享给大家 一.前言 在VC环境中除了我们所常用的Dialog.Menu和Bitmap等标准资源类型之外,它还支持自定义资源类型(Custom Resource),我们自 ...
随机推荐
- 【单调队列DP+manacher】BZOJ2565-最长双回文串
[题目大意] 输入长度为n的串S,求S的最长双回文子串T,即可将T分为两部分X,Y,(|X|,|Y|≥1)且X和Y都是回文串. [思路] 首先普通地求manacher,然后求出以每个位置为左端点和右端 ...
- 【Kruskal+dfs】BZOJ1016- [JSOI2008]最小生成树计数
[题目大意] 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树. [思路] 拖欠了三个月整(?)的题目,搞出来弄掉了……本年度写的时候姿势最丑 ...
- ucenter创始人密码忘记了,修改方法
简单的:1.在UCenter/data/下找到config.inc.php,打开找到下面2行代码: define('UC_FOUNDERPW', '3858cdf66b0794bfd435af8c0c ...
- IE主页被篡改为360导航终极处理办法
不得不吐槽360真他妈是流氓至极,在不被用户许可的情况下直接修改用户浏览器默认主页,还不容易找到修改的地方. 以IE为例:我们将其首页设置为百度https://www.baidu.com/,终极处理办 ...
- NAND Flash大容量存储器K9F1G08U的坏块管理方法
转: http://www.360doc.com/content/11/0915/10/7715138_148381804.shtml 在进行数据存储的时候,我们需要保证数据的完整性,而NAND Fl ...
- ejs循环实例
... //index page var items=[{title:"文章1"},{title:"文章2"}]; app.get('/',function(r ...
- node.js+mysql把数据显示到前端简单实例
原以为数据查出来了,要展示是鸡毛蒜皮的事儿!谁知道,我弄了一天....我错就错在没把connection.query里面. 下面的例子是可以的了! 看过我之前文章的同学,应该很熟悉下面的代码,对!主要 ...
- js中setinterval 的相关使用
1.setinterval 方法 setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式. 2.创建一个setinterval 方法 setInterval(s ...
- spring的6个不同的功能模块
Spring自带的jar文件 Spring模块组成图 Spring的主要模块各自是核心Spring容器,spring的AOP模块,数据訪问与集成,web和远程调用,測试. 核心spring容器: 容器 ...
- [转]CodeSmith 基础教程
本文转自:http://www.cnblogs.com/sorex/archive/2009/12/24/1631533.html 〇. 前言 最近两天自己写了个简单的ORM框架 ...