Vue使用Iconfont图标库

创建vue项目

先基于Vue脚手架vue-cli搭建Vue2.x项目

vue create icontest

安装依赖并运行

// 安装
yarn (npm install)
// 运行
yarn serve (npm run serve)

创建iconfont项目仓库

正在iconfont官网找到资源管理下拉菜单的我的项目选项，进去后点击加号创建项目

创建好项目后就可以尝试添加图标到项目

引入到前端项目

在刚刚创建好的vue项目中的/src/assets目录下创建icon目录
从iconfont网页下载图标到本地
打开下载的zip包，把除demo外的文件拷贝到刚刚创建的icon目录

在vue入口文件main.js中引入css样式

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import "@/assets/icon/iconfont.css" // 自定义全局iconfont图标Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

使用(一般用**i 标签**来引用)

<template><div id="app">// 使用icon 这里的类名iconfont是创建iconfont项目的时候自定义的 icon-是前缀 service-full是对应icon的标识<i style="color:red;font-size: 60" class="iconfont icon-service-full"></i></div>
</template><style lang="less"></style>

注：一般通过该表i 标签的颜色和大小来控制icon的展示

Vue使用Iconfont图标库相关推荐

VUE在线调用阿里Iconfont图标库
前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网 ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
WPF中iconfont图标库的使用
总目录文章目录总目录前言一.查找项目需要的图标二.图标的使用 1.作为字体使用 1.将项目图标,下载并解压缩 2.将ttf文件复制粘贴到自己的项目中 3.xaml中使用 4. 在代码中使用编 ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
uni-app 引入线上的阿里 iconfont图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法在App.vue ...
Vue 使用阿里图标库代替element icon
一.创建阿里图标库项目打开网址:https://www.iconfont.cn/ ,找到[我的项目] 点击右侧文件夹[创建项目] 填写[项目名称],[FontClass]前缀填好后,后续使用icon ...
uniapp中使用iconfont 图标库
我们要是想使用图标的话,快速的应用到我们的项目中 1.阿里矢量图标库作为一个前端开发人员还是要了解的今天就说一下怎么快速应用到我的uni-app项目中第一步选择图标点击我的项目没有 ...
Vue 引入第三方图标库
我的项目是Vue+element,由于这个element中的图标比较少,所以咋们引入阿里云的图标阿里云图标库地址:https://www.iconfont.cn/home/index 首先你要有个阿 ...
vue 引入字体图标库
在main.js中引入从阿里图标库下下来的css 在页面直接使用如: <span class="icon iconfont"></span>
Iconfont 图标库
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...

Vue使用Iconfont图标库

Vue使用Iconfont图标库

创建vue项目

创建iconfont项目仓库

引入到前端项目

Vue使用Iconfont图标库相关推荐

最新文章

热门文章