MUI中虽然提供了很多图标但是不能满足我们所有项目需求，那这个时候需要我们自己定义图标，我这里面推荐的是阿里巴巴图片矢量图

 

　　阿里巴巴矢量图

 

　　可以在这里面搜索想要的图标，例如：网易新闻第一个图标是‘新闻’，就可以在里面搜索新闻两个字，下面就会出现非常多的图标供你选择，总会有你喜欢的一张。

 

　　第一步：选择你喜欢的图标加入购物车里面（这里是免费的）

 

　　第二步：存储

 

　　WeChat_1457402510.jpeg

 

　　第三步：下载到本地

 

　　下载到本地解压之后，会将合并后的字体文件及自动生成的css全部下载

 

　　第四步：修改css

 

　　默认的CSS代码：

 

　　注意：

 

　　1：为保证和mui目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性， src: url('')

 

　　2：只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

 

　　修改之后，代码如下：

 

　　第五步：集成mui

 

　　将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，

 

　　然后即可在mui中引用刚生成的字体图标代码如下：

 

　　引入:

 

　　修改后代：

 

　　主要代码：将mui默认的icon（如mui-icon-home）替换成 iconfont icon-yuedu，修改后预览效果如下：

 

　　图标修改完成，接下来我们来看下页面跳转

 

　　有的小伙伴问我数据是怎么来的，我这里是通过工具抓包过来的，如果不会呢可以看下

 

　　我们第一步首先是从新闻列表点击之后进入详情页面首先来分析一下接口，新闻列表接口如下，

 

　　数据结构：

 

　　详情页面接口：

 

　　详情页面的接口是要通过新闻列表数据中的id，这个时候我们需要在点击新闻列表的时候跳转详情页面，并且把ID传过去。

 

　　这里面有几种做法，最简单的做法就是点击a标签的时候传递过去

 

　　以下代码是上篇文章写的：

 

　　先创建一个详情页面detail.html

 

　　创建详情页面

 

　　我们要对上面的这些代码进行稍微修改,在a标签中点击，并且把id传过去

 

　　在detail.html详情页面中，首先要获取ID，然后进行网络请求

 

　　第一步：获取ID

 

　　第二步：拼接详情页面接口

 

　　第三步：网络请求，从网络获取数据并且解析

 

　　看详情页面的数据结构：

 

　　为了方便大家查看代码，我这里面不会写复杂的代码布局，在这里就做简单的布局进行展示，在这里面要注意的就是数据中有一个字段它里面的标签是后台直接写好返回过来的，所以说你只需要动态插入到对应的容器（ ）里面就可以了。

 

　　HTML代码

 

　　在数据解析中动态添加的标签和内容