vue 引用网络css_vue实战开发008:引入Font Awesome字体图标

今天在引用图标的时候发现Element-UI中的字体图标非常有限,我数了下当前只有70个可用字体图标,很难找到合适的字体图标使用,所以这里我准备引入Font Awesome字体图标,当前4.7版收录了675个字体图标可用,足够我们平时使用了。

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第1张图片

首先我们先来安装Font Awesome字体,在Font Awesome 4版本中,可以通过使用npm安装font-awesome依赖,我们要在终端输入命令:npm install font-awesome 即可安装基础依赖, Font Awesome在Vue环境中使用需要的Vue组件,所以我们接着还要继续安装,在终端输入命令:npm install vue-fontawesome

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第2张图片

接着我们在main.js中引入Font Awesome字体样式,在头部我们添加个引用:import 'font-awesome/css/font-awesome.css'即可

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第3张图片

接下来我们就可以使用Font Awesome字体l ,Font Awesome 被设计为用于行内元素,所以我们通常用i标签来定义,在class中可以通过设置CSS前缀fa和图标的具体名称,来把Font Awesome 图标放在任意位置。

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第4张图片

具体的图标样式我们可以进入Font Awesome 中文网去查看你想要的图标,上面会提供对应的引入方式,你也可以在搜索框内用英文输入我们想搜索的内容:

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第5张图片

Font Awesome提供了很多方便的使用技巧,比如说调整图标相对大小, 使用 fa-lg(33% 递增) , fa-2x, fa-3x, fa-4x, 或 fa-5x,我们只要在图标引用后面添加你想要的大小即可。

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第6张图片

如果你想让图标动起来,那么可以使用 fa-spin 使任意图标旋转,还可以使用 fa-pulse 使其进行8方位旋转 ,相当的炫酷,最主要是操作简单方便又快捷,的确挺好用的。

vue 引用网络css_vue实战开发008:引入Font Awesome字体图标_第7张图片

还有很多很多其他方便的功能,有兴趣的可以自己查看官方案例 http://www.fontawesome.com.cn/examples/

你可能感兴趣的:(vue,引用网络css)