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 图标的更多相关文章

  1. Vue如何引入icon图标

             1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...

  2. Vue Element使用第三库icon图标

    一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...

  3. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  4. Vue Element 使用 icon 图标 (第三方)

    Vue Element 使用 icon 图标 (第三方) element-ui 自带的图标库还是不够全, 还是需要需要引入第三方 icon, 自己在用的时候一直有些问题, 参考了些教程, 详细地记录补 ...

  5. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  6. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  7. CSS3魔法堂:认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  8. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

  9. vue中svg图标使用

    在前端开发中,经常会用到svg图标,在vue开发的中,经常会借助一些第三方插件,经常用的有vue-svg-icon,基本使用步骤为: 1.安装插件(会提示没有安装xml-loader,只需要安装下xm ...

  10. vant - 头部 - header【Layout 布局】【Icon 图标】

    安装 npm i vant -S [main.js] import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); [ind ...

随机推荐

  1. MySQL时区错误导致server time zone value 'Öйú±ê׼ʱ¼ä' 错误

    时区错误 由于中国是东八区,跟mysql配置不同,需要修改: 管理员登录MySQL OK成功

  2. 配置ssh无密码登陆Linux

    Windows下面的话需要安装git,或者其他能执行shell命令的软件 1.首先要先修改SSH的配置文件 vi /etc/ssh/sshd_config#修改配置文件 #如果被#注释了,就取消#号, ...

  3. source ~/.bash_profile 只生效一次 解决方案

    在~/.zshrc文件最后,增加一行: source ~/.bash_profile

  4. Linux小知识收集(不断更新)

    一.说明 以下知识点都来自网络收集,只是给自己记录以免下次同样的问题的时候会忘记,如果知道出处,我都会进行标注,如果侵权的话,请邮件通知我,我会及时删除的 二.知识点 1.将centos的源修改为阿里 ...

  5. vscode中vue代码颜色插件

    vue提示插件[Vscode]       编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整 ...

  6. MySQL存储过程(PROCEDURE)(二)

    一.存储过程的修改: 语法:  ALTER {PROCEDURE | FUNCTION} sp_name [characteristic……]  参数解释: Sp_name:表示存储过程或函数的名称 ...

  7. spring security 学习一

    1.配置基本的springboot web项目,加入security5依赖,启动项目 浏览器访问,即可出现一个默认的登录页面 2.什么都没有配置 登录页面哪里来的 一般不知从何入手,就看官方文档里是如 ...

  8. PADS Layout VX.2.3 设置测量精度

    操作系统:Windows 10 x64 工具1:PADS Layout VX.2.3 Pin #7.#8的实际距离是0.65mm,但是测量的结果却是0.7mm.为什么呢?这是由于测量精度的设置不恰当造 ...

  9. mysql把一个查询结果当作一个子集来查询

    SELECT * FROM (SELECT * FROM table  GROUP BY column HAVING COUNT(column)>=3 ORDER BY column DESC ...

  10. 获取Ajax通信对象方法

    function getXHR() { // 该方法用于获取Ajax通信对象 var xhr = null; if (window.XMLHttpRequest != null && ...