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. WebRTC Precompiled 使用

    最近研究webrtc native code,但源码太大(10GB以上)又需要FQ,就找了个预编译的版本https://sourcey.com/precompiled-webrtc-libraries ...

  2. 论文翻译:Ternary Weight Networks

    目录 Abstract 1 Introduction 1.1 Binary weight networks and model compression 2 Ternary weight network ...

  3. Spring Cloud 2-RabbitMQ 集成(八)

    Spring Cloud  RabbitMQ  pom.xml application.yml 提供者 消费者 队列配置 单元测试 通过消息队列MQ做为通信中心,这里采用RabbitMQ.安装方参考: ...

  4. 【转】一文掌握 Linux 性能分析之内存篇

    [转]一文掌握 Linux 性能分析之内存篇 前面我们已经学习了 CPU 篇,这篇来看下内存篇. 01 内存信息 同样在分析内存之前,我们得知到怎么查看系统内存信息,有以下几种方法. 1.1 /pro ...

  5. Linux 系统调用sysconf

    1.前言 当前计算机都是多核的,linux2.6提供了进程绑定cpu功能,将进程指定到某个core上执行,方便管理进程.linux提供了sysconf系统调用可以获取系统的cpu个数和可用的cpu个数 ...

  6. 【转】Python——读取html的table内容

    Python——python读取html实战,作业7(python programming) 查看源码,观察html结构 # -*- coding: utf-8 -*- from lxml.html ...

  7. 如何kill掉tomcat服务

    一般我们使用tomcat使用的都是8080端口,今天我在使用eclipse的时候连续启动了两次tomcat,发现被占用了. 第一想法便是重启eclipse,重启后发现tomcat的8080仍然是已经被 ...

  8. java http post/get 服务端和客户端实现json传输

    注:本文来源于<java http post/get 服务端和客户端实现json传输> 最近需要写http post接口所以学习下. 总的还是不难直接上源码! PostHttpClient ...

  9. JS一直是单线程,异步(定时器,ajax请求等)是由浏览器来实现的!(转)

    原文地址:https://www.cnblogs.com/woodyblog/p/6061671.html 1.自己画的一张示意图 2.DOM一变化,界面就立刻重新渲染,效率必然很低,所以浏览器的机制 ...

  10. Linux ☞ Good good study,day day up

    一. 修改桌面程序图标 linux的桌面图标都是在/usr/share/applications 目录下的那些 *.desktop文件,修改桌面程序图标就是修改.desktop图标配置文件中Icon的 ...