font-awesome不显示以及字体样式的引入方式:

简介: font-awesome不显示以及字体样式的引入方式:

font-awesome不显示

1,解决:从官网下载了 font-awesome-4.7.0压缩包,解压后,看到有(我下载的4.7.0版本):

74.png

 

2,使用时,不能只把css文件复制到自己的工程项目下,还需要把fonts文件夹一起复制过去【问题解决】

 

ps:字体样式的引入方式:

(1)官网下载样式copy到自己的工程项目下link引入

(2)引入线上的样式:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

提示:75.png,点击下载一下,就可以使用啦.

(3)此方法还可以只引入某个图标选择引入它的代码就可以使用了:例如:引入阿里矢量图库中 :步骤:

选择自己需要的图标-》点“购物车”按钮去-》添加到项目(没有项目则随便起个项目名创建一个)76.png

-》选择 Font-class 的引入方式:77.png

点击更新一下代码:78.png

-》复制生成的代码到<link href=" ">中,

然后,再复制图标名称,注意引入阿里图标名称到元素的class=“ ” 【加前缀 iconfont

“复制代码”即可获得图标名称,79.png

举例:

注意ideal高亮的时候,按照提示,点击一下下载:

81.png

 

使用

82.png

 

目录
相关文章
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
404 0
css:网页引入字体@font-face以及动态加载字体
|
7月前
|
Web App开发 前端开发 Windows
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
8月前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
Web App开发 前端开发 JavaScript
CSS基础:基础选择器、字体和文本样式
CSS基础:基础选择器、字体和文本样式
104 0
|
前端开发
css--字体和文本样式
css--字体和文本样式
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
459 1
|
前端开发
CSS基础之字体样式
CSS基础之字体样式
221 0
CSS基础之字体样式
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1314 0
Font-Awesome4.7.0版本字体图标显示问题
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
402 0
Font-Awesome如何引入矢量字体图标

热门文章

最新文章

相关课程

更多