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 ...
随机推荐
- spring cloud 集群健康监控--turbine-dashboard仪表盘
这里仍然以Windows和jdk为运行环境,按照下面的步骤打包-运行-访问就能看到效果. 运维健康监控--hystrix-dashboard仪表盘 java -jar F:\jars-dashboar ...
- 如何使用Linux的Crontab定时执行PHP脚本的方法[转载]
首先说说cron,它是一个linux下的定时执行工具.根用户以外的用户可以使用 crontab 工具来配置 cron 任务.所有用户定义的 crontab 都被保存在/var/spool/cron 目 ...
- Unity AssetBundle的生成、加载和热更新
当前使用的是unity2018.2.6版本. 生成AssetBundle 这个版本生成AssetBundle有两种方式,一种是在资源的Inspector面板下边配置AssetBundle名称,然后调用 ...
- 西瓜视频蓝光1080P下载方法
西瓜视频的蓝光画质只能在APP上看,如何获取1080P画质的地址呢? 1.先安装 WinPcap 2.然后安装夜神安卓模拟器NOX 3.NOX模拟器里安装西瓜视频的最新APP,旧版本APP只提供超清模 ...
- GIt -- git push 远程分支老是需要重新输入公钥密码问题处理?
步骤: 先查看远程有哪些分支 删除远程分支,重新关联远程分支 最后再git push 到远程分支 git remote -v git remote rm RedisNote git remote a ...
- 如果想让某个块状元素右对齐,脑子里不要就一个float:right,很多时候,margin-left:auto才是最佳的实践
- git 服务器 LINUX端的使用
首先,需要建立一个git服务器----- 这里介绍如何使用git这个服务器 我们在github上下载一份代码,里面有如下内容 我们使用git服务器的时候不能有.git 文件,所以在此将其删除 ys-l ...
- systemctl: command not found
可以使用service代替 service语法有一点区别 这里演示了错误语法和正确语法
- 【玩转开源】基于Docker搭建Bug管理系统 MantisBT
环境Ubuntu18.04 + Docker 1. Docker Hub 链接:https://hub.docker.com/r/vimagick/mantisbt 这里直接使用docker命令的方式 ...
- Docker 的点点滴滴
Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...