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 ...
随机推荐
- 2018-2019-2 网络对抗技术 20165237 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165237 Exp3 免杀原理与实践 一.实践目标 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳 ...
- python&JSONP(Jquery篇)
采用Jquery发送跨域请求: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HDU - 1050
wa了5遍?!! (1)前4遍,思路没简化,企图模拟整个过程,但是调用sort函数时由于没有把奇数的屋子和偶数的屋子统一,排序出了问题. 思路:遍历n段,每次只扫未被标记过的一段,ans++并且从该段 ...
- Pompholyx - Causes, Symptoms and Treatment
Pompholyx is a common type of eczema. It is also known as dyshidrotic eczema or vesicular eczema of ...
- lua简单入门
一.安装windows下的lua环境,luaforwindows 下载最新的5.3版本,下载地址: https://sourceforge.net/projects/luabinaries/files ...
- 关于npm镜像,发布,内网搭建等
npm config set registry http://registry.npmjs.org npm config set registry https://registry.npm.taoba ...
- 【原创】大叔经验分享(49)hue访问hdfs报错/hue访问oozie editor页面卡住
hue中使用hue用户(hue admin)访问hdfs报错: Cannot access: /. Note: you are a Hue admin but not a HDFS superuser ...
- C# 操作Session、Cookie,Url 编码解码工具类WebHelper
using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Text ...
- C# 文件下载工具类FileDownHelper
using System; using System.IO; using System.Threading; using System.Web; namespace 落地页测试代码 { public ...
- ubuntu16.4下使用QT修改系统时间
我也是在网上找的,自己随便改了一下六个lineEdit控件,每个控件输入日期时间,点击按钮触发函数可修改时间. 1 //一键修改系统时间 QString year = ui->lineEdit_ ...