css图标

一、介绍

采用这种字体,我们可以避免网站制作中采用好多图片,一方面解决了浏览器的兼容性问题。另一方面,这些字体都是矢量字体,我们只要在调整这些图标时,将他们的字体大小以及颜色,我们就可以解决很多不是图片的图标了。

二、使用原因

今天在用到jquery.mmenu.js过程中(手机上的单个按钮菜单,具体将在下一节讲到),也是从网上找到的一个简单的demo,很简单的,如下图:

于是我把它拿下来进行研究,但是所有元素都拿下来了,就是有一个图标不显示,如下图。

研究了半天,终于发现了问题所在!由此也进一步对CSS的字体有了进一步了解!现在分享与大家!demo如下

  对于不太懂这款CSS的人,可以一步一步查看这款样式进行分析研究!

第一步:准备工作

将font-face.css放在css目录下,将放置fonts目录在根目录下,下边放四个文件,分别是
glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg ,
glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff 。
如果不懂为什么,我建议看一看这篇博文,很有帮助的!《

CSS3 @font-face》   http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html

第二步:引入HTML和CSS代码粘贴下边

<link href="css/font-face.css" rel="stylesheet" type="text/css">
<a href="#" class="glyphicon glyphicon-th-list"></a>

font-face.css 可以点击这里进行下载。 http://www.ijquery.cn/css/font-face.css

第三步:将这个图标按处理字体一样用CSS处理一下就可以了。以下仅作参考。

<style type="text/css">
	.f24{font-size:24px;}
	.cred{color:#FF0000;}
	.tdn{text-decoration:none;}
</style>
<a href="#" class="glyphicon glyphicon-th-list f24 cred tdn"></a>

三、完整版下载及使用

注意:我在前边标的序号是为了让大家更好的应用相应的 font-face.css ,更好地与后边的CSS对应而这样写的!

HTML代码:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
		<title>矢量图片</title>
		<link href="css/font-face.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			body{background:#999;}
			.l_tbn span{float:left;}
			.l_tbn a{float:left;display:block;overflow:hidden;color:#fff;text-decoration:none;font-size:24px;}
			.l_tbn a:hover{color:#fff;}
		</style>
	</head>

	<body>
		<div class="l_tbn">
			<span>001、</span><a href="#menu" class="glyphicon glyphicon-glass"></a>
			<span>002、</span><a href="#menu" class="glyphicon glyphicon-music"></a>
			<span>003、</span><a href="#menu" class="glyphicon glyphicon-search"></a>
			<span>004、</span><a href="#menu" class="glyphicon glyphicon-envelope"></a>
			<span>005、</span><a href="#menu" class="glyphicon glyphicon-heart"></a>
			<span>006、</span><a href="#menu" class="glyphicon glyphicon-star"></a>
			<span>007、</span><a href="#menu" class="glyphicon glyphicon-star-empty"></a>
			<span>008、</span><a href="#menu" class="glyphicon glyphicon-user"></a>
			<span>009、</span><a href="#menu" class="glyphicon glyphicon-film"></a>
			<span>010、</span><a href="#menu" class="glyphicon glyphicon-th-large"></a>
			<span>011、</span><a href="#menu" class="glyphicon glyphicon-th"></a>
			<span>012、</span><a href="#menu" class="glyphicon glyphicon-th-list"></a>
			<span>013、</span><a href="#menu" class="glyphicon glyphicon-ok"></a>
			<span>014、</span><a href="#menu" class="glyphicon glyphicon-remove"></a>
			<span>015、</span><a href="#menu" class="glyphicon glyphicon-zoom-in"></a>
			<span>016、</span><a href="#menu" class="glyphicon glyphicon-zoom-out"></a>
			<span>017、</span><a href="#menu" class="glyphicon glyphicon-off"></a>
			<span>018、</span><a href="#menu" class="glyphicon glyphicon-signal"></a>
			<span>019、</span><a href="#menu" class="glyphicon glyphicon-cog"></a>
			<span>020、</span><a href="#menu" class="glyphicon glyphicon-trash"></a>
			<span>021、</span><a href="#menu" class="glyphicon glyphicon-home"></a>
			<span>022、</span><a href="#menu" class="glyphicon glyphicon-file"></a>
			<span>023、</span><a href="#menu" class="glyphicon glyphicon-time"></a>
			<span>024、</span><a href="#menu" class="glyphicon glyphicon-road"></a>
			<span>025、</span><a href="#menu" class="glyphicon glyphicon-download-alt"></a>
			<span>026、</span><a href="#menu" class="glyphicon glyphicon-download"></a>
			<span>027、</span><a href="#menu" class="glyphicon glyphicon-upload"></a>
			<span>028、</span><a href="#menu" class="glyphicon glyphicon-inbox"></a>
			<span>029、</span><a href="#menu" class="glyphicon glyphicon-play-circle"></a>
			<span>030、</span><a href="#menu" class="glyphicon glyphicon-repeat"></a>
			<span>031、</span><a href="#menu" class="glyphicon glyphicon-refresh"></a>
			<span>032、</span><a href="#menu" class="glyphicon glyphicon-list-alt"></a>
			<span>033、</span><a href="#menu" class="glyphicon glyphicon-lock"></a>
			<span>034、</span><a href="#menu" class="glyphicon glyphicon-flag"></a>
			<span>035、</span><a href="#menu" class="glyphicon glyphicon-headphones"></a>
			<span>036、</span><a href="#menu" class="glyphicon glyphicon-volume-off"></a>
			<span>037、</span><a href="#menu" class="glyphicon glyphicon-volume-down"></a>
			<span>038、</span><a href="#menu" class="glyphicon glyphicon-volume-up"></a>
			<span>039、</span><a href="#menu" class="glyphicon glyphicon-qrcode"></a>
			<span>040、</span><a href="#menu" class="glyphicon glyphicon-barcode"></a>
			<span>041、</span><a href="#menu" class="glyphicon glyphicon-tag"></a>
			<span>042、</span><a href="#menu" class="glyphicon glyphicon-tags"></a>
			<span>043、</span><a href="#menu" class="glyphicon glyphicon-book"></a>
			<span>044、</span><a href="#menu" class="glyphicon glyphicon-bookmark"></a>
			<span>045、</span><a href="#menu" class="glyphicon glyphicon-print"></a>
			<span>046、</span><a href="#menu" class="glyphicon glyphicon-camera"></a>
			<span>047、</span><a href="#menu" class="glyphicon glyphicon-font"></a>
			<span>048、</span><a href="#menu" class="glyphicon glyphicon-bold"></a>
			<span>049、</span><a href="#menu" class="glyphicon glyphicon-italic"></a>
			<span>050、</span><a href="#menu" class="glyphicon glyphicon-text-height"></a>
			<span>051、</span><a href="#menu" class="glyphicon glyphicon-text-width"></a>
			<span>052、</span><a href="#menu" class="glyphicon glyphicon-align-left"></a>
			<span>053、</span><a href="#menu" class="glyphicon glyphicon-align-center"></a>
			<span>054、</span><a href="#menu" class="glyphicon glyphicon-align-right"></a>
			<span>055、</span><a href="#menu" class="glyphicon glyphicon-align-justify"></a>
			<span>056、</span><a href="#menu" class="glyphicon glyphicon-list"></a>
			<span>057、</span><a href="#menu" class="glyphicon glyphicon-indent-left"></a>
			<span>058、</span><a href="#menu" class="glyphicon glyphicon-indent-right"></a>
			<span>059、</span><a href="#menu" class="glyphicon glyphicon-facetime-video"></a>
			<span>060、</span><a href="#menu" class="glyphicon glyphicon-pencil"></a>
			<span>061、</span><a href="#menu" class="glyphicon glyphicon-picture"></a>
			<span>062、</span><a href="#menu" class="glyphicon glyphicon-map-marker"></a>
			<span>063、</span><a href="#menu" class="glyphicon glyphicon-adjust"></a>
			<span>064、</span><a href="#menu" class="glyphicon glyphicon-tint"></a>
			<span>065、</span><a href="#menu" class="glyphicon glyphicon-edit"></a>
			<span>066、</span><a href="#menu" class="glyphicon glyphicon-share"></a>
			<span>067、</span><a href="#menu" class="glyphicon glyphicon-check"></a>
			<span>068、</span><a href="#menu" class="glyphicon glyphicon-move"></a>
			<span>069、</span><a href="#menu" class="glyphicon glyphicon-step-backward"></a>
			<span>070、</span><a href="#menu" class="glyphicon glyphicon-fast-backward"></a>
			<span>071、</span><a href="#menu" class="glyphicon glyphicon-backward"></a>
			<span>072、</span><a href="#menu" class="glyphicon glyphicon-play"></a>
			<span>073、</span><a href="#menu" class="glyphicon glyphicon-pause"></a>
			<span>074、</span><a href="#menu" class="glyphicon glyphicon-stop"></a>
			<span>075、</span><a href="#menu" class="glyphicon glyphicon-forward"></a>
			<span>076、</span><a href="#menu" class="glyphicon glyphicon-fast-forward"></a>
			<span>077、</span><a href="#menu" class="glyphicon glyphicon-step-forward"></a>
			<span>078、</span><a href="#menu" class="glyphicon glyphicon-eject"></a>
			<span>079、</span><a href="#menu" class="glyphicon glyphicon-chevron-left"></a>
			<span>080、</span><a href="#menu" class="glyphicon glyphicon-chevron-right"></a>
			<span>081、</span><a href="#menu" class="glyphicon glyphicon-plus-sign"></a>
			<span>082、</span><a href="#menu" class="glyphicon glyphicon-minus-sign"></a>
			<span>083、</span><a href="#menu" class="glyphicon glyphicon-remove-sign"></a>
			<span>084、</span><a href="#menu" class="glyphicon glyphicon-ok-sign"></a>
			<span>085、</span><a href="#menu" class="glyphicon glyphicon-question-sign"></a>
			<span>086、</span><a href="#menu" class="glyphicon glyphicon-info-sign"></a>
			<span>087、</span><a href="#menu" class="glyphicon glyphicon-screenshot"></a>
			<span>088、</span><a href="#menu" class="glyphicon glyphicon-remove-circle"></a>
			<span>089、</span><a href="#menu" class="glyphicon glyphicon-ok-circle"></a>
			<span>090、</span><a href="#menu" class="glyphicon glyphicon-ban-circle"></a>
			<span>091、</span><a href="#menu" class="glyphicon glyphicon-arrow-left"></a>
			<span>092、</span><a href="#menu" class="glyphicon glyphicon-arrow-right"></a>
			<span>093、</span><a href="#menu" class="glyphicon glyphicon-arrow-up"></a>
			<span>094、</span><a href="#menu" class="glyphicon glyphicon-arrow-down"></a>
			<span>095、</span><a href="#menu" class="glyphicon glyphicon-share-alt"></a>
			<span>096、</span><a href="#menu" class="glyphicon glyphicon-resize-full"></a>
			<span>097、</span><a href="#menu" class="glyphicon glyphicon-resize-small"></a>
			<span>098、</span><a href="#menu" class="glyphicon glyphicon-plus"></a>  <!--98-->
			<span>099、</span><a href="#menu" class="glyphicon glyphicon-minus"></a> <!--99-->
			<span>100、</span><a href="#menu" class="glyphicon glyphicon-asterisk"></a> <!--100-->
			<span>101、</span><a href="#menu" class="glyphicon glyphicon-exclamation-sign"></a>
			<span>102、</span><a href="#menu" class="glyphicon glyphicon-gift"></a>
			<span>103、</span><a href="#menu" class="glyphicon glyphicon-leaf"></a>
			<span>104、</span><a href="#menu" class="glyphicon glyphicon-fire"></a>
			<span>105、</span><a href="#menu" class="glyphicon glyphicon-eye-open"></a>
			<span>106、</span><a href="#menu" class="glyphicon glyphicon-eye-close"></a>
			<span>107、</span><a href="#menu" class="glyphicon glyphicon-warning-sign"></a>
			<span>108、</span><a href="#menu" class="glyphicon glyphicon-plane"></a>
			<span>100、</span><a href="#menu" class="glyphicon glyphicon-calendar"></a>
			<span>110、</span><a href="#menu" class="glyphicon glyphicon-random"></a>
			<span>111、</span><a href="#menu" class="glyphicon glyphicon-comment"></a>
			<span>112、</span><a href="#menu" class="glyphicon glyphicon-magnet"></a>
			<span>113、</span><a href="#menu" class="glyphicon glyphicon-chevron-up"></a>
			<span>114、</span><a href="#menu" class="glyphicon glyphicon-chevron-down"></a>
			<span>115、</span><a href="#menu" class="glyphicon glyphicon-retweet"></a>
			<span>116、</span><a href="#menu" class="glyphicon glyphicon-shopping-cart"></a>
			<span>117、</span><a href="#menu" class="glyphicon glyphicon-folder-close"></a>
			<span>118、</span><a href="#menu" class="glyphicon glyphicon-folder-open"></a>
			<span>119、</span><a href="#menu" class="glyphicon glyphicon-resize-vertical"></a>
			<span>120、</span><a href="#menu" class="glyphicon glyphicon-resize-horizontal"></a>
			<span>121、</span><a href="#menu" class="glyphicon glyphicon-hdd"></a>
			<span>122、</span><a href="#menu" class="glyphicon glyphicon-bullhorn"></a>
			<span>123、</span><a href="#menu" class="glyphicon glyphicon-bell"></a>
			<span>124、</span><a href="#menu" class="glyphicon glyphicon-certificate"></a>
			<span>125、</span><a href="#menu" class="glyphicon glyphicon-thumbs-up"></a>
			<span>126、</span><a href="#menu" class="glyphicon glyphicon-thumbs-down"></a>
			<span>127、</span><a href="#menu" class="glyphicon glyphicon-hand-right"></a>
			<span>128、</span><a href="#menu" class="glyphicon glyphicon-hand-left"></a>
			<span>129、</span><a href="#menu" class="glyphicon glyphicon-hand-up"></a>
			<span>130、</span><a href="#menu" class="glyphicon glyphicon-hand-down"></a>
			<span>131、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-right"></a>
			<span>132、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-left"></a>
			<span>133、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-up"></a>
			<span>134、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-down"></a>
			<span>135、</span><a href="#menu" class="glyphicon glyphicon-globe"></a>
			<span>136、</span><a href="#menu" class="glyphicon glyphicon-wrench"></a>
			<span>137、</span><a href="#menu" class="glyphicon glyphicon-tasks"></a>
			<span>138、</span><a href="#menu" class="glyphicon glyphicon-filter"></a>
			<span>139、</span><a href="#menu" class="glyphicon glyphicon-briefcase"></a>
			<span>140、</span><a href="#menu" class="glyphicon glyphicon-fullscreen"></a>
			<span>141、</span><a href="#menu" class="glyphicon glyphicon-dashboard"></a>
			<span>142、</span><a href="#menu" class="glyphicon glyphicon-paperclip"></a>
			<span>143、</span><a href="#menu" class="glyphicon glyphicon-heart-empty"></a>
			<span>144、</span><a href="#menu" class="glyphicon glyphicon-link"></a>
			<span>145、</span><a href="#menu" class="glyphicon glyphicon-phone"></a>
			<span>146、</span><a href="#menu" class="glyphicon glyphicon-pushpin"></a>
			<span>147、</span><a href="#menu" class="glyphicon glyphicon-euro"></a>
			<span>148、</span><a href="#menu" class="glyphicon glyphicon-usd"></a>
			<span>149、</span><a href="#menu" class="glyphicon glyphicon-gbp"></a>
			<span>150、</span><a href="#menu" class="glyphicon glyphicon-sort"></a>
			<span>151、</span><a href="#menu" class="glyphicon glyphicon-sort-by-alphabet"></a>
			<span>152、</span><a href="#menu" class="glyphicon glyphicon-sort-by-alphabet-alt"></a>
			<span>153、</span><a href="#menu" class="glyphicon glyphicon-sort-by-order"></a>
			<span>154、</span><a href="#menu" class="glyphicon glyphicon-sort-by-order-alt"></a>
			<span>155、</span><a href="#menu" class="glyphicon glyphicon-sort-by-attributes"></a>
			<span>156、</span><a href="#menu" class="glyphicon glyphicon-sort-by-attributes-alt"></a>
			<span>157、</span><a href="#menu" class="glyphicon glyphicon-unchecked"></a>
			<span>158、</span><a href="#menu" class="glyphicon glyphicon-expand"></a>
			<span>159、</span><a href="#menu" class="glyphicon glyphicon-collapse"></a>
			<span>160、</span><a href="#menu" class="glyphicon glyphicon-collapse-top"></a>

		</div>
	</body>
</html>

CSS代码:

@font-face {

	font-family:‘Glyphicons Halflings‘;
	src:url(‘../fonts/glyphicons-halflings-regular.eot‘);   /* IE9 Compat Modes */
	src:url(‘../fonts/glyphicons-halflings-regular.eot?#iefix‘) format(‘embedded-opentype‘),/* IE6-IE8 */
	url(‘../fonts/glyphicons-halflings-regular.woff‘) format(‘woff‘),  /* Modern Browsers */
	url(‘../fonts/glyphicons-halflings-regular.ttf‘) format(‘truetype‘),/* Safari, Android, iOS */
	url(‘../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular‘) format(‘svg‘); /* Legacy iOS */

}

.glyphicon:before {
	font-family: ‘Glyphicons Halflings‘;
	font-style: normal;
	-webkit-font-smoothing: antialiased
}

.glyphicon-glass:before {
	content: "\e001"
}

.glyphicon-music:before {
	content: "\e002"
}

.glyphicon-search:before {
	content: "\e003"
}

.glyphicon-envelope:before {
	content: "\2709"
}

.glyphicon-heart:before {
	content: "\e005"
}

.glyphicon-star:before {
	content: "\e006"
}

.glyphicon-star-empty:before {
	content: "\e007"
}

.glyphicon-user:before {
	content: "\e008"
}

.glyphicon-film:before {
	content: "\e009"
}

.glyphicon-th-large:before {
	content: "\e010";
}

.glyphicon-th:before {
	content: "\e011"
}

.glyphicon-th-list:before {
	content: "\e012"
}

.glyphicon-ok:before {
	content: "\e013"
}

.glyphicon-remove:before {
	content: "\e014"
}

.glyphicon-zoom-in:before {
	content: "\e015"
}

.glyphicon-zoom-out:before {
	content: "\e016"
}

.glyphicon-off:before {
	content: "\e017"
}

.glyphicon-signal:before {
	content: "\e018"
}

.glyphicon-cog:before {
	content: "\e019"
}

.glyphicon-trash:before {
	content: "\e020"
}

.glyphicon-home:before {
	content: "\e021"
}

.glyphicon-file:before {
	content: "\e022"
}

.glyphicon-time:before {
	content: "\e023"
}

.glyphicon-road:before {
	content: "\e024"
}

.glyphicon-download-alt:before {
	content: "\e025"
}

.glyphicon-download:before {
	content: "\e026"
}

.glyphicon-upload:before {
	content: "\e027"
}

.glyphicon-inbox:before {
	content: "\e028"
}

.glyphicon-play-circle:before {
	content: "\e029"
}

.glyphicon-repeat:before {
	content: "\e030"
}

.glyphicon-refresh:before {
	content: "\e031"
}

.glyphicon-list-alt:before {
	content: "\e032"
}

.glyphicon-lock:before {
	content: "\e033"
}

.glyphicon-flag:before {
	content: "\e034"
}

.glyphicon-headphones:before {
	content: "\e035"
}

.glyphicon-volume-off:before {
	content: "\e036"
}

.glyphicon-volume-down:before {
	content: "\e037"
}

.glyphicon-volume-up:before {
	content: "\e038"
}

.glyphicon-qrcode:before {
	content: "\e039"
}

.glyphicon-barcode:before {
	content: "\e040"
}

.glyphicon-tag:before {
	content: "\e041"
}

.glyphicon-tags:before {
	content: "\e042"
}

.glyphicon-book:before {
	content: "\e043"
}

.glyphicon-bookmark:before {
	content: "\e044"
}

.glyphicon-print:before {
	content: "\e045"
}

.glyphicon-camera:before {
	content: "\e046"
}

.glyphicon-font:before {
	content: "\e047"
}

.glyphicon-bold:before {
	content: "\e048"
}

.glyphicon-italic:before {
	content: "\e049"
}

.glyphicon-text-height:before {
	content: "\e050"
}

.glyphicon-text-width:before {
	content: "\e051"
}

.glyphicon-align-left:before {
	content: "\e052"
}

.glyphicon-align-center:before {
	content: "\e053"
}

.glyphicon-align-right:before {
	content: "\e054"
}

.glyphicon-align-justify:before {
	content: "\e055"
}

.glyphicon-list:before {
	content: "\e056"
}

.glyphicon-indent-left:before {
	content: "\e057"
}

.glyphicon-indent-right:before {
	content: "\e058"
}

.glyphicon-facetime-video:before {
	content: "\e059"
}

.glyphicon-picture:before {
	content: "\e060"
}

.glyphicon-pencil:before {
	content: "\270f"  /*这个有些特殊*/
}

.glyphicon-map-marker:before {
	content: "\e062"
}

.glyphicon-adjust:before {
	content: "\e063"
}

.glyphicon-tint:before {
	content: "\e064"
}

.glyphicon-edit:before {
	content: "\e065"
}

.glyphicon-share:before {
	content: "\e066"
}

.glyphicon-check:before {
	content: "\e067"
}

.glyphicon-move:before {
	content: "\e068"
}

.glyphicon-step-backward:before {
	content: "\e069"
}

.glyphicon-fast-backward:before {
	content: "\e070"
}

.glyphicon-backward:before {
	content: "\e071"
}

.glyphicon-play:before {
	content: "\e072"
}

.glyphicon-pause:before {
	content: "\e073"
}

.glyphicon-stop:before {
	content: "\e074"
}

.glyphicon-forward:before {
	content: "\e075"
}

.glyphicon-fast-forward:before {
	content: "\e076"
}

.glyphicon-step-forward:before {
	content: "\e077"
}

.glyphicon-eject:before {
	content: "\e078"
}

.glyphicon-chevron-left:before {
	content: "\e079"
}

.glyphicon-chevron-right:before {
	content: "\e080"
}

.glyphicon-plus-sign:before {
	content: "\e081"
}

.glyphicon-minus-sign:before {
	content: "\e082"
}

.glyphicon-remove-sign:before {
	content: "\e083"
}

.glyphicon-ok-sign:before {
	content: "\e084"
}

.glyphicon-question-sign:before {
	content: "\e085"
}

.glyphicon-info-sign:before {
	content: "\e086"
}

.glyphicon-screenshot:before {
	content: "\e087"
}

.glyphicon-remove-circle:before {
	content: "\e088"
}

.glyphicon-ok-circle:before {
	content: "\e089"
}

.glyphicon-ban-circle:before {
	content: "\e090"
}

.glyphicon-arrow-left:before {
	content: "\e091"
}

.glyphicon-arrow-right:before {
	content: "\e092"
}

.glyphicon-arrow-up:before {
	content: "\e093"
}

.glyphicon-arrow-down:before {
	content: "\e094"
}

.glyphicon-share-alt:before {
	content: "\e095"
}

.glyphicon-resize-full:before {
	content: "\e096"
}

.glyphicon-resize-small:before {
	content: "\e097"
}

.glyphicon-plus:before {
	content: "\002b"  /* 98 */
}

.glyphicon-minus:before {
	content: "\2212"  /* 99 */
}

.glyphicon-asterisk:before {
	content: "\002a"  /* 100 */
}

.glyphicon-exclamation-sign:before {
	content: "\e101"
}

.glyphicon-gift:before {
	content: "\e102"
}

.glyphicon-leaf:before {
	content: "\e103"
}

.glyphicon-fire:before {
	content: "\e104"
}

.glyphicon-eye-open:before {
	content: "\e105"
}

.glyphicon-eye-close:before {
	content: "\e106"
}

.glyphicon-warning-sign:before {
	content: "\e107"
}

.glyphicon-plane:before {
	content: "\e108"
}

.glyphicon-calendar:before {
	content: "\e109"
}

.glyphicon-random:before {
	content: "\e110"
}

.glyphicon-comment:before {
	content: "\e111"
}

.glyphicon-magnet:before {
	content: "\e112"
}

.glyphicon-chevron-up:before {
	content: "\e113"
}

.glyphicon-chevron-down:before {
	content: "\e114"
}

.glyphicon-retweet:before {
	content: "\e115"
}

.glyphicon-shopping-cart:before {
	content: "\e116"
}

.glyphicon-folder-close:before {
	content: "\e117"
}

.glyphicon-folder-open:before {
	content: "\e118"
}

.glyphicon-resize-vertical:before {
	content: "\e119"
}

.glyphicon-resize-horizontal:before {
	content: "\e120"
}

.glyphicon-hdd:before {
	content: "\e121"
}

.glyphicon-bullhorn:before {
	content: "\e122"
}

.glyphicon-bell:before {
	content: "\e123"
}

.glyphicon-certificate:before {
	content: "\e124"
}

.glyphicon-thumbs-up:before {
	content: "\e125"
}

.glyphicon-thumbs-down:before {
	content: "\e126"
}

.glyphicon-hand-right:before {
	content: "\e127"
}

.glyphicon-hand-left:before {
	content: "\e128"
}

.glyphicon-hand-up:before {
	content: "\e129"
}

.glyphicon-hand-down:before {
	content: "\e130"
}

.glyphicon-circle-arrow-right:before {
	content: "\e131"
}

.glyphicon-circle-arrow-left:before {
	content: "\e132"
}

.glyphicon-circle-arrow-up:before {
	content: "\e133"
}

.glyphicon-circle-arrow-down:before {
	content: "\e134"
}

.glyphicon-globe:before {
	content: "\e135"
}

.glyphicon-wrench:before {
	content: "\e136"
}

.glyphicon-tasks:before {
	content: "\e137"
}

.glyphicon-filter:before {
	content: "\e138"
}

.glyphicon-briefcase:before {
	content: "\e139"
}

.glyphicon-fullscreen:before {
	content: "\e140"
}

.glyphicon-dashboard:before {
	content: "\e141"
}

.glyphicon-paperclip:before {
	content: "\e142"
}

.glyphicon-heart-empty:before {
	content: "\e143"
}

.glyphicon-link:before {
	content: "\e144"
}

.glyphicon-phone:before {
	content: "\e145"
}

.glyphicon-pushpin:before {
	content: "\e146"
}

.glyphicon-euro:before {
	content: "\20ac"   /* 147 */
}

.glyphicon-usd:before {
	content: "\e148"
}

.glyphicon-gbp:before {
	content: "\e149"
}

.glyphicon-sort:before {
	content: "\e150"
}

.glyphicon-sort-by-alphabet:before {
	content: "\e151"
}

.glyphicon-sort-by-alphabet-alt:before {
	content: "\e152"
}

.glyphicon-sort-by-order:before {
	content: "\e153"
}

.glyphicon-sort-by-order-alt:before {
	content: "\e154"
}

.glyphicon-sort-by-attributes:before {
	content: "\e155"
}

.glyphicon-sort-by-attributes-alt:before {
	content: "\e156"
}

.glyphicon-unchecked:before {
	content: "\e157"
}

.glyphicon-expand:before {
	content: "\e158"
}

.glyphicon-collapse:before {
	content: "\e159"
}

.glyphicon-collapse-top:before {
	content: "\e160"
}
时间: 2025-01-07 23:52:20

css图标的相关文章

一个标签的72变,打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,求star!) 关于改造,一开始的想法就是使用百分比尺寸来改造,然

CSS图标文字对齐和表单输入框文字对齐兼容

张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-block比较多,表单输入框和按钮以line-height:21-22为准.然后超出的用padding来补充. 以下摘录部分原文中的实践代码. 1.图标和文字对齐 一般的图标和文字对齐html代码: <p><i class="icon"></i>前端开发博客&l

CSS图标定位

最近公司这样一个需求,如图:把一图标放在一张图片上,用background-position定位图标; background-image url("image/img")放一张背景图片 background-repeat:no-repeat 不平辅 background-position:0px 0px 背景定位(x,y) /* CSS代码*/.icon-container { height: 16px; width: 16px; border-radius: 3px; display

各种纯css图标

CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右直角三角形 ,八角形, 十二角形.      网页代码中用到(<!--

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

完美CSS文档的8个最佳实践

  在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为CSS编写文档可以为你的项目提供很多好处:促进更好的代码实践.降低新员工的上手难度.在本文中,我将说明编写CSS文档的优点,并分享我认为的最佳实践.让文档为你工作,而不是阻碍你的工作. 1. 制定基本规则 当你和你的团队不清楚CSS文档具体需要编写哪些内容.文档应该如何工作时,你很难跟上编写CSS文档

图标字的使用方法

简介:Font Awesome是一套绝佳的图标字体库和CSS框架,它是可缩放的矢量图标,用户可以可以对图标的特性进行更改,比如大小.颜色.阴影等并且可以组合不同的图标创造自己喜欢的图标.Font Awesome的产生,为网页设计和Web前端开发人员带来极大的方便 工具/原料 电脑.下载好的Bootstrap文件 代码编辑器(sublime,nopade++等) 方法/步骤 登录Font Awesome官网,下载Font Awesome安装包,最好下载最新版本的,因为最新版本中的更新的子图图标相对

JQuery Mobile - 自定义图标!

环境 jquery1.9.1.js jquery mobile 1.4.2版 图标制作 18x18px 底透明的png图标 使用图标,这个过程开始怎么弄都不行,只有个灰色的圆出现,不见图标:或者出现图标,但位置不对,经过看jquery demo,终于知道了如何使用 步骤如下 1 .当然是定义你的css图标类了 .ui-icon-myicon:after { background-image: url("img/title.png"); /**你的图片,路径是相对于当前使用文件可以访问到