twitter-bootstrap 向引导程序添加额外的字形
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23823756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding extra glyphicons to bootstrap
提问by Kevin Boonekamp
Dear fellow designers/developers
亲爱的设计师/开发人员
I have created 8 extra glyphicons for my bootstrap website. Uploaded them to icomoon and downloaded them as font, this all works perfect.
我为我的引导程序网站创建了 8 个额外的字形。将它们上传到 icomoon 并将它们下载为字体,这一切都很完美。
I am able to add my font to my CSS and use it in HTML withou any problem, but I want to use the font as extra Glyphicons.
我能够将我的字体添加到我的 CSS 并在 HTML 中使用它而没有任何问题,但我想将该字体用作额外的 Glyphicon。
How can I do this?
我怎样才能做到这一点?
回答by G Ravinder
refer to this website which provides the font icons to bootstrap
请参阅此网站,该网站提供引导程序的字体图标
download fontawesome here fontawesome.io
在这里下载 fontawesome fontawesome.io
add css file link to your page
将 css 文件链接添加到您的页面
<link href='/path/to/font-awesome.css' rel='stylesheet'/>
use css classes mentioned in font-awesome.cssstating with 'fa-'
使用font-awesome.css说明中提到的 css 类'fa-'
example: <i class="fa fa-desktop"></i>
例子: <i class="fa fa-desktop"></i>
please copy cssand fontsfolders to same folder
请复制css和fonts文件夹相同的文件夹
回答by WasiF
Steps to use font-Awsome
使用 font-Awsome 的步骤
- Download Font-Awsome
- Extract .zip file
- after extracting, you will get folder i.e. font-awesome-4.5.0
- Add this folder by drag and drop to your content or bootstrap folder
Add font-awesome.css file as a reference in your web-page
<link href="~/Content/font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet" />get icons as told by @G Ravinder i.e.
<i class="fa fa-desktop"></i> <span class="fa fa-desktop"></span>
- 下载字体-Awsome
- 解压 .zip 文件
- 解压后,你会得到文件夹,即 font-awesome-4.5.0
- 通过拖放到您的内容或引导程序文件夹来添加此文件夹
在您的网页中添加 font-awesome.css 文件作为参考
<link href="~/Content/font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet" />获取@G Ravinder 所说的图标,即
<i class="fa fa-desktop"></i> <span class="fa fa-desktop"></span>
That's all :-)
就这样 :-)

