在开发项目中遇到了矢量图标

一套绝佳的图标字体库和CSS框架

vue 中引入font-awesome

直接npm install font-awesome --save 就可以了,里边包含了样式和字体,直接引入就ok了

import 'font-awesome/css/font-awesome.min.css' 

项目中直接使用

<i class="fa fa-camera-retro"></i>

react 中引入font-awesome

link

npm install --save react-fontawesome //这里不包含样式,需要引入font-awesome的样式

import React, { Component } from 'react';
import './index.less'; import 'font-awesome/less/font-awesome.less';
import 'react-fontawesome'; <i class="fa fa-camera-retro"></i>
												

font-awesome vue/react 通用的图标的更多相关文章

  1. uni-app,vue,react,Trao之缓存类封装

    uni-app,vue,react,Trao之缓存类封装 一,介绍与需求 1.1,介绍 缓存主要分为如下几个 1.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏 ...

  2. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  4. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  5. 使用Font Awesome替换你的网站图标

    http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...

  6. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  7. 前端开发组件化设计vue,react,angular原则漫谈

    前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...

  8. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  9. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  10. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

随机推荐

  1. linux 下彻底删除MySQL

    1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql 2.停止mysql服务.删除之前安装的mysql 删除命令:rpm -e –nodeps 包名 # rpm -ev M ...

  2. python 中的lamda 表达式

      #1. print(list(filter(lambda x: x%2,range(10))))    #[1, 3, 5, 7, 9]# 非lamda表示def odd(x): return x ...

  3. [MySQL高级](一) EXPLAIN用法和结果分析

    转载自: https://blog.csdn.net/why15732625998/article/details/80388236

  4. Android Studio相关配置说明

    介绍:Android Sdutio 是谷歌推出的一个 Android 集成开发工具. 现已将 SDK(software development kit)集成到 Android Studio 中.可以直 ...

  5. WPF BackSpace 回退到上一个页面

    在Wpf程序中,有时候点击到某些控件后,再按下[BackSpace]键,画面会回到上一个 TextBox可能自己处理了,所以没有这一个现象. 解决方案是: 在App.xaml.cs 的 Initial ...

  6. BottomNavigationBar 自定义 底部导航条、以及实现页面切换

    一.Flutter BottomNavigationBar 组件 BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Sc ...

  7. Navie UI

    开发文档 一个 Vue 3 组件库, 它比较完整,主题可调,用 TypeScript 写的,快.

  8. 6.配置git-码云仓库

    使用git需要使用码云或者github,github存在访问慢的情况,所以我使用码云(gitee). git客户端 下载安装 到git官网  https://git-scm.com/ 下载git客户端 ...

  9. Centos 7.5 MySql的安装和配置

    一.安装 三个步骤: wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpmyum -y ins ...

  10. nuxt项目中使用store

    首先初始化创建一个nuxt项目 nuxt项目创建以后,内部已自动集成store,所以无需再单独安装和引入 在根目录的store文件夹下新建文件,例如home.js //home.js export c ...