在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low。
第一步: 进入官网,注册--登录 阿里巴巴矢量库 第二步: 图标管理---我的项目--创建项目---新建 新建项目 第三步: 进入图标库--官方图标库 开始选择图标 第四步:选中图标-- 添加入库--
我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;
mpvue 跟 wepy 真的很难抉择,我目前没有兼容多平台的需求,所以直觉告诉我还是用 wepy 吧~
本篇笔者将讲解在Vue项目中如何引入第三方图标库,如:Inconfont https://www.iconfont.cn fontawesome https://fontawesome.io/ 登录到Iconfont官网,然后选择你想要的图标,添加到购物车里。最后添加到你的项目里。
layui 目前(2020-06-28)提供了168个图标,但是很多时候这些图标中没有自己想要的,今天在项目中想找一个二维码的图标,但是在layui提供的图标中并没有,此时我们可以扩展图标(阿里巴巴矢量图标库 www.iconfont.cn)layui提供的图标也是取材于此 1. 进入阿里巴巴矢量图标库官网,登陆账号 2. 下载图标 3. 三种使用方式 4. Font-class 使用示例 1. 进入阿里巴巴矢量图标库官网,登陆账号 ---- 阿里巴巴矢量图标库官网 https://www.iconf
font其实是个好东西,不论是写css还是。。。,这不,牛老师想把它用在openlayers4中,用以很方便的设置图标的大小、颜色,还不失真,东拼西凑,终于算是完成了。
用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦。
注意:新版iconfont支持多色图标,这些多色图标在Unicode模式下将不能使用,如果有需求建议使用Symbol的引用方式
实现的效果如图,在开发唯一在线客服(gofly.v1kf.com)时,使用图标按钮
最近突然有一个想法,文章中的链接不够明显,可不可以在不修改类名的前提下,给所有 a 标签添加一个图标呢?
在上一篇《微前端框架qiankun项目实战(一)--本地开发篇》发布后,感谢有网友提出了微应用的缓存问题,的确基于第一篇使用的registerMicroApps方式很难做到缓存,要做到应用缓存的方式使用手动加载管理微应用的方式是最好的,我将再写一篇补充篇使用loadMicroApp手动管理微应用,本篇我会模拟部署一下主应用和微应用,并将揭开我上一篇所谓的巨坑是什么。
在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。
之前写过一篇文章,关于如何使用阿里巴巴矢量图标,但是之前使用的是直接调用阿里巴巴的cdn文件,而这篇教程说的是本地引入使用。
沉寂了一周了,打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器。话不多说,一起来实战吧! 项目展示
之前用的 iconfont.css 可以设置伪类元素的字体为 iconfont ,然后给伪类的 content 属性值定义 iconfnt 的图标标识就能正常显示了。
在前端项目开发中,我们经常需要引入一些图标,如果是使用直接下载的方式引入,那么后期想再修改图标颜色就会很麻烦,所以还是比较推荐用代码的方式引入。
1.font-class引用 备注:不支持多色 <link rel="stylesheet" type="text/css" href="../../SL%20img/one/iconfont.css"> </head> <body> <i class="iconfont ic02
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
一、先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二、到这个平台https://tran
关于Vant怎么使用第三方图标,网上有文章,以使用iconfont为例,有几种方法,说其中一种:
在这里我创建一个示例项目 找两个图标加入 (如果项目很小需求比较少 才一两个的话直接选择颜色下载png格式就好了) 我主要是为了减少包体积 而且增添方便 图标颜色控制 加载快(微信小程序上传上限为 2048 kb)
打开解压后文件夹,找到iconfont.css并且打开,注意红框内容,全部删除,替换成刚刚复制过来的代码
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片,在不同的分辨率上会出现失真的情况,后面在其它小伙伴的介绍下,我了解到了矢量图标。
文章链接: https://qw-null.github.io/2021/07/20/阿里iconfont使用方法/ ★转载请注明来自 QW’s Blog!★
字体:实际上是长得像图标的字体,占用的空间小,消耗的带宽小,能够更快的显示页面。字体是矢量的,所以不会失真,可以按照字体一样设置字体颜色和大小。
Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件,但是有的时候我们可能需要自定义Loading效果,掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环,而旋转部分则比较简单,直接通过CSS动画即可实现,所以关键部分就是得到Loading的圆环。
fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。
前面铺垫写了不少HTML、CSS、Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了。
这个图片我用了阿里的矢量图库,如果不懂如何使用的朋友,可以访问iconfont阿里巴巴矢量图标库从注册到使用。
npm install之后(有时候项目会自动生成,就无需npm install了), package.json 是 记录第三方库依赖 的目录, node_modules 存放 第三方库依赖模块:
inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计。使用Bootstrap 3+ Framework,HTML5和CSS3,等技术开发而成。
在小程序中经常会用到各种各样的图标,如果这些图标都使用图片的话,将会大大增加小程序打包后的体积,而小程序限制代码最大2MB,分包加载4MB,所以为了缩小体积,我们可以使用图标来缩小体积。
前面的篇章基本已经说明在webpack中如何构建vue框架的时候。除了这些基础框架的要素,为了快速开发app应用。还要借助于更多的开源组件。
“ uni-app 是一个使用 Vue.js 开发所有前端应用的框架,是一种终极的跨平台解决方案,这里的平台,主要指的是App平台(android、ios)、小程序平台、H5平台。开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 ” 01 开发一个小视频应用 一 初始化项目 打开HBuilderX IDE,新建一个名称为mini-video的初始化uni-app项目,这里勾选uni-app即可创建,项目创建完成后,打开pages
transform:translate(水平,垂直) (ts)
前段时间在开发基于移动端的前端项目的时候,遇到一个使用table的需求,但是基于移动端的Vant框架的组件库里面没有table相关的组件支持,这就需要借助第三方组件来实现基于移动端的table功能。基于移动端的table的第三方组件有一个使用起来比较方便的组件:vue-easytable,该组件从集成到使用也都很简单,但是会遇到一个致命的问题,那就是本文所要分享的内容。
https://juejin.cn/post/6952150039732944910
前面有文章 openlayers4中用font设置图标样式 就iconfont在ol5中的使用做了一个尝试,后面有很多童鞋问我说实现不了,一直没有时间去做一个详细的测试,最近在做了诸多测试后,觉得这种方式比较靠谱,在此分享出来,希望对用到的童鞋有所帮助和启示。
沉寂了一周了,打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器。话不多说,一起来实战吧!
上一节我们学习了,webpack如何打包样式文件以及如何自动添加前缀。本节我们继续学习如何打包@import引入的样式文件,css模块化以及如何打包字体文件。
uni-app 是组合了 Vue 和微信小程序的相关技术知识,要求大家同时俱备 Vue 和原生小程序的开发基础。
把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件,在最后引入
bash 切换到桌面 运行 vue init webpack vue-demo 生成初始化vue项目
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" 阻止用户手滑发大缩小页面
领取专属 10元无门槛券
手把手带您无忧上云