前端项目添加自定义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
版权声明:本文为博主原创文章,转载请附上博文链接!
转载于:https://www.cnblogs.com/smail-bao/p/10496859.html
前端项目添加自定义icont图标步骤相关推荐
- axios 使用步骤很简单,首先在前端项目中,引入 axios:
2019独角兽企业重金招聘Python工程师标准>>> 前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources ...
- [万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行,步骤有详解
[万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行,步骤有详解 准备工作 安装必备工具/库 nodejs React 脚手架 需要的 node 依赖包 分析需求 初始化项目 搭建框 ...
- 精选 GitHub 值得收藏的100个前端项目
作者:小明小明长大了 博客:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者 ...
- GitHub上值得收藏的100个精选前端项目!
引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者简书上文章会持续更新,版权归原作者所有. 最新更新 codepen 一个在线编辑前端项目的网站,其中有一些 ...
- GitHub 上100个优质前端项目整理,值得收藏!
作 者:小明小明长大了 来 源:https://www.jianshu.com/p/72ca8192f7b8 这里整理收集了 GitHub上几乎所有优秀的前端项目,包括工具,优质资源,测试工具,框架, ...
- 怎么让前端项目运行起来_如何立即使您的前端项目看起来更好
怎么让前端项目运行起来 We've all been there. You've been learning the basics of front end Web development, and ...
- GitHub 上100个优质前端项目整理,非常全面!
点击"开发者技术前线",选择"星标" 在看|星标|留言, 真爱 作 者:小明小明长大了 来 源:https://www.jianshu.com/p/72ca8 ...
- 建议收藏:GitHub 上值得收藏的100个精选前端项目!
作 者:小明小明长大了 来 源:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习, ...
- GitHub 上值得收藏的 100 个精选前端项目!
code小生 一个专注大前端领域的技术平台 公众号回复Android加入安卓技术群 来 源:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀 ...
最新文章
- Linux 系统必须掌握的文件_【all】
- 历届 SIGGRAPH 上有什么新奇、有趣的项目?
- Oracle 11g RAC ASM 错误之(1)
- Unity5 GI与PBS渲染从用法到着色代码
- PHP ceil()函数
- HCIE Secuirty 防火墙内容安全组合 备考笔记(幕布)
- c++之static的一些用法
- Fedora23 安装 psycopg2
- Instsrv.exe和Srvany.exe的使用方法
- 光大银行监控平台实践,含详细工具及架构选型思路
- 把华为交换机设置成(NTP)时钟源服务器
- 图解阿里达摩院内部结构
- 使用xlwt将数据保存到excel文件中,python
- 五款支持Mac的设计软件
- 2020年个人年终总结与计划
- 云端敏捷部署单节点MySQl与Redis服务(以Ubuntu为例)
- 【调研】Soft Prompt Tuning 模型发展调研:P-tuning,Prefix-tuning,Prompt-tuning,P-tuning v2,PPT
- 如何使用阿里云服务器快速搭建个人网站?
- 刻度标尺精确定位系统-更为人性化的位置检测系统
- Linux云主机开启IPv6服务
热门文章
- Web 3.0让网络巨头们恐慌?Dapp爆发潮的到来会更让人颤抖!
- 关于网易新游猫和老鼠我的吐槽:来啊,一起来虐猫啊
- ubuntu安装pangolin
- C4D R25 UV的展开与导出
- CorelDRAW 2023版本更新内容及安装详细教程
- 服务器如何释放虚拟内存,服务器如何释放虚拟内存
- OWT Server信令分析 (下) [Open WebRTC Toolkit]
- uva 10306 简单DP
- php touppercase strtoupper,php大小写转换函数(strtolower、strtoupper)用法介绍
- 镭速快答:网页端无法连接镭速,提示未启动怎么办?