文档章节

font-awesome 图标无法显示

柴高八斗之父
 柴高八斗之父
发布于 2016/11/30 19:12
字数 227
阅读 25
收藏 1
点赞 0
评论 0

font-awesome 图标无法显示,如果你的相对位置没问题,那么可能是 :你项目里的样式的字体定义的问题。

因为 font-awesome本身就是字体图标,你可以打开它的css文件就可以看出:

@font-face{ font-family:'FontAwesome'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
<style>
* {	margin:0; padding:0; font-family: "Microsoft YaHei" !important;  /*注意看这里,因为这里的全局样式字体样式定义为了微软雅黑,所以导致下面的awesome字体无法显示。*/}
</style>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<i class="fa fa-camera-retro" style="font-size:40px; color:#F33;">2222</i>
</body>
</html>

全局定义没有问题,【解决办法:只要去掉后面的 !important 即可。】

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 158
码字总数 83573
作品 0
宁波
前端工程师
关于字体图标在firefox上本地访问无法显示的问题分析

一、问题 在本地引入了Font Awesome 字体图标,网页未部署到服务上(在本地直接访问,部署到nginx服务器,火狐浏览器能显示) 目录结构: 引入方式: 使用方式: 访问地址: 在Chrome浏览器中...

二两豆腐 ⋅ 2016/11/07 ⋅ 1

font-awesome与easyui结合

备忘记录 最近想重拾起来,做个ERP系统,做为一个前端盲,前端框架的选择是最头痛的问题 当前bootstrap与font-awesome的组合无疑是非常有吸引力的,从网上下了N多的后台框架模板,断断续续调...

itwarcraft ⋅ 2014/10/25 ⋅ 0

Font Awesome 3.1 发布,Bootstrap 图标字体

Font Awesome 3.1 发布了,该版本包含 54 个新图标,更多样式,详情请看 CHANGELOG。 Font Awesome 是为 Twitter Bootstrap 设计的图标字体。通过Web Font的方式来显示一些图标,好处是图标可...

oschina ⋅ 2013/05/12 ⋅ 2

font awesome 在火狐浏览器下无法显示

在本地引入了Font Awesome 字体图标,网页未部署到服务上(在本地直接访问,部署到nginx服务商,火狐浏览器又能显示了),引入方式如下 使用方式如下 退出

二两豆腐 ⋅ 2016/11/06 ⋅ 1

Font Awesome

Font Awesome 是为 Twitter Bootstrap 设计的图标字体。通过Web Font的方式来显示一些图标,好处是图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式。...

匿名 ⋅ 2013/04/16 ⋅ 5

在Axure中使用FontAwesome替换你的网站图标[axure小技巧]

你是不是还在为你的网站做一个很小的图标而忙碌着?你是不是还在为找一个图标导出百度或者谷歌?你有没有想过可以用字体来做一个图标代替普通的图片图标? 这两天给公司做案例,由于自己又对...

bigbigtu ⋅ 2014/05/03 ⋅ 0

rails - 使用font awesome 来实现图标

rails - 使用font awesome 来实现图标 申思维的站点/Siwei's site2018-01-031 阅读 图标fontRails 参考: font awesome 官方网站, 和 rails插件: https://github.com/bokmann/font-awesom...

申思维的站点/Siwei's site ⋅ 01/03 ⋅ 0

Font Awesome(奥森字体图标) 4.2.0发布啦,兼容IE7+!

作为最流行的图标字体Font Awesome(奥森字体图标),被认为是为Bootstrap而创造的图标字体,它的最新版本4.2.0上线了,共479款图标,几乎包括了网站开发所有常用图标,而且支持IE7+(Font awes...

ThinkCMF ⋅ 2014/09/08 ⋅ 6

Font Awesome 4.1 发布,71 个闪亮新图标

Font Awesome 4.1 发布,该版本包含 71 个闪亮新图标字体。至此,Font Awesome 所有的图标请看 http://fortawesome.github.io/Font-Awesome/icons/...

oschina ⋅ 2014/05/18 ⋅ 4

WEB前端学习:vue图标组件Vue-Awesome,让你快速方便的使用font-awesome图标

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL主从复制原理、半同步操作步骤及原理

1.1 企业Linux运维场景数据同步方案 1.1.1 文件级别的异机同步方案 1、scp/sftp/nc 命令可以实现远程数据同步。 2、搭建ftp/http/svn/nfs 服务器,然后在客户端上也可以把数据同步到服务器。...

xiaomin0322 ⋅ 16分钟前 ⋅ 0

Oracle10g 数据及文件迁移过程[原]

QL*Plus: Release 10.2.0.1.0 - Production on 星期三 5月 11 10:22:35 2011 Copyright (c) 1982, 2005, Oracle. All rights reserved. 连接到: Oracle Database 10g Enterprise Edition Re......

harrypotter ⋅ 22分钟前 ⋅ 0

nginx安装

1:安装工具包 wget、vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc gcc-c++ 2:下载nginx安装包 wget http://nginx.org/download/nginx-1......

壹丶贰 ⋅ 25分钟前 ⋅ 0

ideaVim安装及配置

1.安装插件 File-Settings-Plugins,Browse Repositories,输入ideavim,安装。 重启后,在Tools-Vim Emulator启用。 2.快捷键设置 ideaViim键与idea快捷键有冲突,可以在Settings-Other Se...

Funcy1122 ⋅ 29分钟前 ⋅ 0

MySQL中B+Tree索引原理

B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引。B+树中的B代表平衡(balance),而不是二叉(binary),因为B+树是从最早的平衡二叉树演化而来的。在讲B...

浮躁的码农 ⋅ 43分钟前 ⋅ 0

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 47分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 58分钟前 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 今天 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 今天 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部