前端项目添加自定义icont图标步骤
文章转自https://blog.csdn.net/weixin_36185028/article/details/53416185
这里就用到了两个文件,一个是icontfont.css,另外一个是icontfont.ttf,
在开发过程中,往往需使用到各式各样的icon图标,而有的图标库提供的资源并不多,由于icon图标属于字体样式,如果使用图片替代的话,缺点比较明显,比如放大失真,每次联网都要加载等。所以往往需要自己利用其他的icon图标库自定义图标样式,下面借用阿里巴巴矢量图标库为例分享一下如何在前端项目中自定义icon图标。
其中,红色字体标出来是容易漏掉的步骤。
一.登陆阿里巴巴矢量图标库
打开网址:http://www.iconfont.cn/plus
准备好新浪博客或Github账号,登陆
二.挑选和下载图标
在搜索框搜索自己需要的图标,然后鼠标已到看中的图标上方,一个个加入购物车,推荐选择相同类型下的看起来尽可能大的图标,便于后面设置样式。
点击购物车,添加至项目,默认选中“链接”,点击确定,跳转到项目界面,选中右侧“链接”(默认是选中的),然后点击下载至本地
下载下来的项目压缩包名是一串字母数字等组成,解压得到如下文件,其中前三个html文件提供的是教程,真正有用的是其他的文件
三.修改相关样式
将整个解压后的项目文件夹导入前端项目中
如果只兼容安卓和IOS移动端的话,那么只需要iconfont.css文件和iconfont.ttf文件即可,其中iconfont.css文件是必需的;
将iconfont.css复制到你的APP项目的css文件夹中,将iconfont.ttf放到fonts文件夹中(没有就新建一个),比如我的项目是Gfilm副本:两文件放的位置如下图:
在css文件夹中打开iconfont.css文件,如下:
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1480523339684'); /* IE9*/
src: url('iconfont.eot?t=1480523339684#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1480523339684') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1480523339684') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1480523339684#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-yanchu:before { content: "\e605"; }
.icon-dianying:before { content: "\e633"; }
.icon-faxian:before { content: "\e642"; }
.icon-cinema:before { content: "\e60c"; }
其实从后面的代码拼音或英文可以看出我们需要的图标。
因为兼容IOS和安卓端只需要tff文件所以删除其他的url,把tff文件来源改成引用当前APP项目的fonts文件夹的来源,此处没有提示,需要手敲进去,修改后的iconfont.css如下:
注意:此处有坑,由于iconfont.css是url连续导入的,中间用逗号隔开,所以修改后的句尾要改成分号。
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.tff') 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;
-moz-osx-font-smoothing: grayscale;
}
.icon-yanchu:before { content: "\e605"; }
.icon-dianying:before { content: "\e633"; }
.icon-faxian:before { content: "\e642"; }
.icon-cinema:before { content: "\e60c"; }
四.引入样式
打开APP项目中网页,在head引入iconfont.css样式
<link rel="stylesheet" type="text/css"href="css/iconfont.css"/>
在导航栏的nav位置里面a标签里面的span的class属性里面在后面先添加iconfont类名,再添加 icon图标名字,就是iconfont.css代码末尾那些拼音或英文,敲出时候会发现有相关提示。如下所示,红色字体为添加的类名:
<nav class="mui-scroll mui-bar mui-bar-tab" style="background: #FF0033;">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon iconfont icon-dianying">
</span>
<span class="mui-tab-label">电 影</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon iconfont icon-cinema">
</span>
<span class="mui-tab-label">影 院</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon iconfont icon-yanchu">
</span>
<span class="mui-tab-label">演 出</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon iconfont icon-faxian">
</span>
<span class="mui-tab-label ">发 现</span>
</a>
</nav>
到此出一般都能显示出图标了,如果不显示,请检查iconfont.css里面的是否正确导入,比如../fonts/iconfont.tff中的../是否漏掉,活着末尾逗号没有改成分号。
五.常见其他问题
导入图标没有显示在文字的正上方或者图标全部高亮状态,如下图:
文字和图标没有对其的解决办法:
在span中添加id选择器,然后在style标签内设置margin-left样式,建议使用百分比,当然也可以用class样式设置,此时在阿里巴巴矢量库中选择的大一点的图标就比较好调了。
MUI框架下图标全部高亮的解决办法:
找到style样式中的这段代码:
span.mui-icon {
font-size:14px;
color:#007aff;
margin-left:-15px;
padding-right:10px;
}
可以看到该选择器限定了color,把color: #007aff;去掉即可。
---------------------
作者:骑着代码去流浪
来源:CSDN
原文:https://blog.csdn.net/weixin_36185028/article/details/53416185
版权声明:本文为博主原创文章,转载请附上博文链接!
前端项目添加自定义icont图标步骤的更多相关文章
- vue前端项目初始化的步骤
前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接 vue create 项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件 ...
- 使用vue框架开发前端项目的步骤
前端项目的开发 1. 本地安装nodejs https://nodejs.org/en/download/ 2. 测试安装 > node -v 3. 本地安装git > git --ver ...
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- 前后端分离之前端项目构建(grunt+require+angular)
前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...
- 前端项目构建工具---Grunt
什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
- 从一个前端项目实践 Git flow 的流程与参考
Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...
- Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架
在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...
- Angular02 通过angular-cli来搭建web前端项目
利用angular-cli的常见命令: npm i --save 包名 -> 软件依赖 npm i --save-dev 包名 -> 开发依赖 ng new 项 ...
随机推荐
- BZOJ-2-4870: [Shoi2017]组合数问题 矩阵优化 DP
就 是 要 我 们 从 n k 件 物 品 里 面 选 出 若 干 件,使 得 其 数 量 模 k 等 于 r 的 方 案 数 . dp方程 f [ i , j ] 表示前 i 件物品拿了若干件使 ...
- Xamarin Essentials教程数据传输DataTransfer
Xamarin Essentials教程数据传输DataTransfer 通过数据传输功能,应用程序可以将文本或网址发送到其它的应用程序,这样就可以在应用程序之间共享数据,实现常见的分享功能.Xa ...
- Jmeter压测过程报错the target server failed to respond
失败事务报错信息如下, Socket closed Non HTTP response code: org.apache.http.NoHttpResponseException (the targe ...
- unity仿微信飞机大战项目
开发路线: 1,游戏背景(连续播放) 2,添加主角 3,设置游戏主角的动画 4,添加两种子弹并设置子弹的运动 5,添加三种子弹 设置子弹的自动生成和运动 6,添加两种奖励物品 设置奖励物品的自动生成和 ...
- 使用pycharm以及用pycharm句子切分调试
c在D盘建立了个文件夹,然后把segment1.py文件放进去. 然后双击segment1,就自动用pycharm打开了.然后就可以运行和debug.之前最开始的时候我segment1.py文件放桌面 ...
- elastic-job详解(四):失效转移
elastic-job中最关键的特性之一就是失效转移.配置了失效转移之后,如果在任务执行过程中有一个执行实例挂了,那么之前被分配到这个实例的任务(或者分片)会在下次任务执行之前被重新分配到其他正常节点 ...
- Ubunut操作系统下nDPI的部署及简单使用
[系统:Ubuntu16.04LTS ] [ nDPI版本:2.5.0] [ 内核:4.15.0-39-generic] 前期准备工作--依赖安装 所需依赖包(前两个ubuntu16已有不需安装) g ...
- es6冲刺01
1.let/const 1)作用域:es5中有全局作用域.函数作用域.es6中新增了块级作用域 2)let定义的变量在所在块级作用域外失效,严格模式下失效后直接报错, 且不允许重复声明同名变量 3)c ...
- openstack 之~keystone基础
第一:keystone是什么? keystone是 OpenStack Identity Service 的项目名称,是一个负责身份管理验证.服务规则管理和服务令牌功能.它实现了openstack的i ...
- Android的Databinding-资源绑定
databinding还能对布局的资源文件进行绑定. <data class="ResourceBinding"> <variable name="la ...