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 ...
随机推荐
- # 20175333曹雅坤《Java程序设计》第五周学习总结
教材学习内容总结 第六章要点: 1.接口:1)接口声明: interface //接口的名字 2)接口体 2.实现接口:类实现接口:一个类需要在类声明中使用关键字implements声明该类实现一个或 ...
- ansible-plabybook 常用的有用的命令
ansible-plabybook 常用的有用的命令 ansible-playbook常用的非常有用的参数有: -C ,大写c ,这个命令的意思就是模拟执行,会告诉你跑完这个playbook会发生什么 ...
- hostapd、/dev/random、/dev/urandom
在使用hostapd做软ap时,出现了random熵不够的问题,导致节点连接不上这个ap. 下面先解释一下/dev/random和/dev/urandom 先让我们从一个工程中遇到的实际问题开始,先上 ...
- 如何kill掉tomcat服务
一般我们使用tomcat使用的都是8080端口,今天我在使用eclipse的时候连续启动了两次tomcat,发现被占用了. 第一想法便是重启eclipse,重启后发现tomcat的8080仍然是已经被 ...
- OpenStack—nova组件计算服务
nova介绍: Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova 来实现的. 用 ...
- elment-ui中 修改el-table表头的颜色
可以直接在table上添加: :header-cell-style="{background:'#f5f7fa'}" 也可以使用绑定方法来修改 :header-cell-style ...
- mybatis的xml中sql语句中in的写法(迭代遍历)
这里使用 foreach标签 <foreach item="item" collection="listTag" index="index&q ...
- Javal连接字符串为Json
public static String concatJson(String[] keys,String[] values,String[] alreadyJsonKeys){ if(keys==nu ...
- OpenSSL MD5 API
#include <stdlib.h> #define _GNU_SOURCE /* for getline API */ #include <stdio.h> /* Open ...
- 使用Linux命令行测试网速
安装speedtest speedtest是一个用Python编写的轻量级Linux命令行工具,在Python2.4至3.4版本下均可运行.它基于Speedtest.net的基础架构来测量网络的上/下 ...