vue font-icon 图标
1、vue 游览器左上角小图标
把.ico文件放在根目录下的static文件夹下,然后link标签引入 <link rel="shortcut icon" href="./static/favicon.ico">
2、引入font文件并使用font图标(例:font-awesome css)
(1)把font文件放入到文件夹
(2)创建font.css 修改(如其他修改url文件名)
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont-v=4.7.0.eot");
src: url("../fonts/fontawesome-webfont-.eot#iefix&v=4.7.0")
format("embedded-opentype"),
url("../fonts/fontawesome-webfont-v=4.7.0.woff2") format("woff2"),
url("../fonts/fontawesome-webfont-v=4.7.0.woff") format("woff"),
url("../fonts/fontawesome-webfont-v=4.7.0.ttf") format("truetype"),
url("../fonts/fontawesome-webfont-v=4.7.0.svg#fontawesomeregular")
format("svg");
font-weight: normal;
font-style: normal;
}
(3)main.js 引入font.css
import './common/font-awesome/css/font-awesome.min.css'
注意:同级(./)上级(../)
(4)网页中使用
<i class="fa fa-navicon"></i>
fontawesome图标css参考链接:http://fontawesome.dashgame.com/
vue font-icon 图标的更多相关文章
- Vue如何引入icon图标
1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...
- Vue Element使用第三库icon图标
一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...
- icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
- Vue Element 使用 icon 图标 (第三方)
Vue Element 使用 icon 图标 (第三方) element-ui 自带的图标库还是不够全, 还是需要需要引入第三方 icon, 自己在用的时候一直有些问题, 参考了些教程, 详细地记录补 ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- CSS3魔法堂:认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...
- vue中svg图标使用
在前端开发中,经常会用到svg图标,在vue开发的中,经常会借助一些第三方插件,经常用的有vue-svg-icon,基本使用步骤为: 1.安装插件(会提示没有安装xml-loader,只需要安装下xm ...
- vant - 头部 - header【Layout 布局】【Icon 图标】
安装 npm i vant -S [main.js] import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); [ind ...
随机推荐
- 基于范围的for循环(C++11)
C++11新增了一种循环:基于范围的for循环.这简化了一种常见的循环任务:对数组(或容器类,如vector和array)的每个元素执行相同的操作,如下例所示 for语句允许简单的范围迭代:(只遍历, ...
- 3D Slicer中文教程(五)—三维视图颜色改变
3D Slicer在分割后三维重建的图像,效果很好,但是存在一定的不足,默认的颜色并不是很合适,这时手动设置三维视图下的需要的颜色就很有必要了.如下图所示,默认的三维重建后的颜色. 这样的颜色显然不是 ...
- 微软推荐的.net命名规范
许多命名约定都与标识符的大小写有关.值得注意的是,公共语言运行库 (CLR) 支持区分大小写和不区分大小写的语言.本主题中描述的大小写约定可帮助开发人员理解和使用库. 大小写样式 下列术语描述了标识符 ...
- 在Cyclone IVE中使用进位链的几个规则
最近在FPGA上做ps级的Delay line,所以认真剖析了一下Cyclone IVE4的布局布线延迟.这里说明CARRY链的几个特性规则,如有错误请各位大大指出,谢谢.(另外由于匆忙没有时间验证其 ...
- python学习第31天
# 操作系统的发展历程 # 主要的人机矛盾是什么 : CPU的使用率 # 输入\输出数据和CPU计算没有关系 # 操作系统是怎么进化的 # 传统的纸带输入 # 磁带的存储降低了输入输出数据占用的时间, ...
- hdu 1241 Oil Deposits (简单搜索)
题目: The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. ...
- JAVA 数组作为方法返回值—返回地址
package Code411;/*一个方法可以有0,1,多个 参数,但只能有0和1个返回值希望一个方法产生多个结果数据进行返回 数组作为方法的参数,传递进去的是数组的地址值. */public cl ...
- unity 屏幕适配的问题
首先是AB的加载时,会出现localscale的改变,需要在初始化时将其调节为1.0并且 offmax和min都设置为0,此时方才会出现在自己臆想之中(尤其是需要设置父节点时)
- iOS开发之获取当前展示的VC
/** 递归查找当前显示的VC*/ + (UIViewController *)recursiveFindCurrentShowViewControllerFromViewController:(UI ...
- Java遍历Map对象的四种方式
关于java中遍历map具体哪四种方式,请看下文详解吧. 方式一 :这是最常见的并且在大多数情况下也是最可取的遍历方式.在键值都需要时使用. Map<Integer, Integer> m ...