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文件名)

  1. @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

  1. import './common/font-awesome/css/font-awesome.min.css'
  1. 注意:同级(./)上级(../)
  1. 4)网页中使用
  1. <i class="fa fa-navicon"></i>
  1. fontawesome图标css参考链接:http://fontawesome.dashgame.com/
  1.  

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. EASY-X

    ----------------------- Page 1----------------------- 一 创建新项目 VC 写程序要有项目的概念,一个项目可以有多个 .cpp 文件,多个项目构 ...

  2. python 机器学习三剑客 之 Matplotlib

    Matplotlib介绍: Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形 . 通过 Matplotlib,开发者可以仅需要几 ...

  3. python3数学函数

    数 学 函 数 abs(x) 返回数字的绝对值,如abs(-10) 返回 10 ceil(x) 返回数字的上入整数,如math.ceil(4.1) 返回 5 cmp(x, y) 如果 x < y ...

  4. ZOJ 4110 Strings in the Pocket (马拉车+回文串)

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4110 题目: BaoBao has just found two s ...

  5. rethinking imageNet pre-training

    paper url: https://arxiv.org/abs/1811.08883  当在数据量足够和训练iterations足够的情况下,ImageNet pretrain不会对最后的性能有帮 ...

  6. ftp和mysql数据库结合使用

    问题描述: 看下 1.1.1.1 的ftp为什么连不上 报错的信息: 'ftpServer' => '1.1.1.1', // FTP服务器地址 ', 'ftpUsername' => ' ...

  7. 深入Java虚拟机:多态性实现机制——静态分派与动态分派

    方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法调用在Class文件里面存储的都只是符号引用,而不是方法在实际运行时内存布局中的入口地址.这个特性给Java带来了更强大的动态扩 ...

  8. EndNote中文文献导入出错和数量限制解决

    发现之前记录的存在忽略,把存在的一个重要问题遗漏了,Endnote中文文献导入无法导入,软件奔溃问题,现在在原先基础上补上(补到最后): ..一路绿色φ(>ω<*) φ(>ω< ...

  9. Knockout 官网学习文档目录

    官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...

  10. [原创]Zynq AXI-CDMA的使用

    Xilinx 提供了3种DMA AXI-DMA AXI-CDMA AXI-VDMA 使用CDMA能够满足项目需求(MM-MM),DS文档介绍如下: The Xilinx LogiCORE™ IP AX ...