zoukankan      html  css  js  c++  java
  • 在vue项目中使用iconfont

    在实际的项目开发中,我们经常会借助confont图标库来渲染一些图标
    本文将以win平台为例,详细介绍在vue项目中使用iconfont的一般流程

    一、选择图标并下载到本地

    打开 iconfont官网
    进入“图标管理”中“我的项目”,并新建项目
    image1.png
    挑选图标放入购物车中,然后打开购物车侧边栏,“添加至项目”
    image2.png
    回到“我的项目”,点击“下载至本地”

    二、在项目中引入、使用 iconfont

    在vue项目的styles目录下,新建 iconfont 目录
    将 以 iconfont为文件名、以.eot .svg .ttf .woff为后缀的4个文件放入iconfont目录中
    image3.png
    将 iconfont.css 文件放入styles目录下
    在main.js中引入CSS文件

    import 'styles/iconfont.css'
    

    然后打开 iconfont.css 文件,修改相关文件的src路径
    image4.png
    最后,在需要用到图标的HTML代码中
    为图标所在的标签添加 class="iconfont"
    并回到iconfont官网,复制图标代码到标签内即可
    image5.png

  • 相关阅读:
    类与对象
    类的声明与实例化
    面向对象的基本概念
    css下拉导航栏代码
    面向对象的三大特性
    面向对象三大基本特性,五大基本原则
    dom事件
    PHP 流程
    权限 查找
    留言板案例
  • 原文地址:https://www.cnblogs.com/baebae996/p/13302939.html
Copyright © 2011-2022 走看看