添加图标:before 和 :after css中用法
#sTitle:after{
position: absolute;
top: 2px;
font-family: "FontAwesome";
content: "\f0d7";
padding-left: 10px; }
附上图标类对应的字符编码表:
NAME | CODE | NAME | CODE |
---|---|---|---|
.fa-glass | \f000 | .fa-github-alt | \f113 |
.fa-music | \f001 | .fa-folder-o | \f114 |
.fa-search | \f002 | .fa-folder-open-o | \f115 |
.fa-envelope-o | \f003 | .fa-smile-o | \f118 |
.fa-heart | \f004 | .fa-frown-o | \f119 |
.fa-star | \f005 | .fa-meh-o | \f11a |
.fa-star-o | \f006 | .fa-gamepad | \f11b |
.fa-user | \f007 | .fa-keyboard-o | \f11c |
.fa-film | \f008 | .fa-flag-o | \f11d |
.fa-th-large | \f009 | .fa-flag-checkered | \f11e |
.fa-th | \f00a | .fa-terminal | \f120 |
.fa-th-list | \f00b | .fa-code | \f121 |
.fa-check | \f00c | .fa-mail-reply-all | \f122 |
.fa-remove | \f00d | .fa-reply-all | \f122 |
.fa-close | \f00d | .fa-star-half-empty | \f123 |
.fa-times | \f00d | .fa-star-half-full | \f123 |
.fa-search-plus | \f00e | .fa-star-half-o | \f123 |
.fa-search-minus | \f010 | .fa-location-arrow | \f124 |
.fa-power-off | \f011 | .fa-crop | \f125 |
.fa-signal | \f012 | .fa-code-fork | \f126 |
.fa-gear | \f013 | .fa-unlink | \f127 |
.fa-cog | \f013 | .fa-chain-broken | \f127 |
.fa-trash-o | \f014 | .fa-question | \f128 |
.fa-home | \f015 | .fa-info | \f129 |
.fa-file-o | \f016 | .fa-exclamation | \f12a |
.fa-clock-o | \f017 | .fa-superscript | \f12b |
.fa-road | \f018 | .fa-subscript | \f12c |
.fa-download | \f019 | .fa-eraser | \f12d |
.fa-arrow-circle-o-down | \f01a | .fa-puzzle-piece | \f12e |
.fa-arrow-circle-o-up | \f01b | .fa-microphone | \f130 |
.fa-inbox | \f01c | .fa-microphone-slash | \f131 |
.fa-play-circle-o | \f01d | .fa-shield | \f132 |
.fa-rotate-right | \f01e | .fa-calendar-o | \f133 |
.fa-repeat | \f01e | .fa-fire-extinguisher | \f134 |
.fa-refresh | \f021 | .fa-rocket | \f135 |
.fa-list-alt | \f022 | .fa-maxcdn | \f136 |
.fa-lock | \f023 | .fa-chevron-circle-left | \f137 |
.fa-flag | \f024 | .fa-chevron-circle-right | \f138 |
.fa-headphones | \f025 | .fa-chevron-circle-up | \f139 |
.fa-volume-off | \f026 | .fa-chevron-circle-down | \f13a |
.fa-volume-down | \f027 | .fa-html5 | \f13b |
.fa-volume-up | \f028 | .fa-css3 | \f13c |
.fa-qrcode | \f029 | .fa-anchor | \f13d |
.fa-barcode | \f02a | .fa-unlock-alt | \f13e |
.fa-tag | \f02b | .fa-bullseye | \f140 |
.fa-tags | \f02c | .fa-ellipsis-h | \f141 |
.fa-book | \f02d | .fa-ellipsis-v | \f142 |
.fa-bookmark | \f02e | .fa-rss-square | \f143 |
.fa-print | \f02f | .fa-play-circle | \f144 |
.fa-camera | \f030 | .fa-ticket | \f145 |
.fa-font | \f031 | .fa-minus-square | \f146 |
.fa-bold | \f032 | .fa-minus-square-o | \f147 |
.fa-italic | \f033 | .fa-level-up | \f148 |
.fa-text-height | \f034 | .fa-level-down | \f149 |
.fa-text-width | \f035 | .fa-check-square | \f14a |
.fa-align-left | \f036 | .fa-pencil-square | \f14b |
.fa-align-center | \f037 | .fa-external-link-square | \f14c |
.fa-align-right | \f038 | .fa-share-square | \f14d |
.fa-align-justify | \f039 | .fa-compass | \f14e |
.fa-list | \f03a | .fa-toggle-down | \f150 |
.fa-dedent | \f03b | .fa-caret-square-o-down | \f150 |
.fa-outdent | \f03b | .fa-toggle-up | \f151 |
.fa-indent | \f03c | .fa-caret-square-o-up | \f151 |
.fa-video-camera | \f03d | .fa-toggle-right | \f152 |
.fa-photo | \f03e | .fa-caret-square-o-right | \f152 |
.fa-image | \f03e | .fa-euro | \f153 |
.fa-picture-o | \f03e | .fa-eur | \f153 |
.fa-pencil | \f040 | .fa-gbp | \f154 |
.fa-map-marker | \f041 | .fa-dollar | \f155 |
.fa-adjust | \f042 | .fa-usd | \f155 |
.fa-tint | \f043 | .fa-rupee | \f156 |
.fa-edit | \f044 | .fa-inr | \f156 |
.fa-pencil-square-o | \f044 | .fa-cny | \f157 |
.fa-share-square-o | \f045 | .fa-rmb | \f157 |
.fa-check-square-o | \f046 | .fa-yen | \f157 |
.fa-arrows | \f047 | .fa-jpy | \f157 |
.fa-step-backward | \f048 | .fa-ruble | \f158 |
.fa-fast-backward | \f049 | .fa-rouble | \f158 |
.fa-backward | \f04a | .fa-rub | \f158 |
.fa-play | \f04b | .fa-won | \f159 |
.fa-pause | \f04c | .fa-krw | \f159 |
.fa-stop | \f04d | .fa-bitcoin | \f15a |
.fa-forward | \f04e | .fa-btc | \f15a |
.fa-fast-forward | \f050 | .fa-file | \f15b |
.fa-step-forward | \f051 | .fa-file-text | \f15c |
.fa-eject | \f052 | .fa-sort-alpha-asc | \f15d |
.fa-chevron-left | \f053 | .fa-sort-alpha-desc | \f15e |
.fa-chevron-right | \f054 | .fa-sort-amount-asc | \f160 |
.fa-plus-circle | \f055 | .fa-sort-amount-desc | \f161 |
.fa-minus-circle | \f056 | .fa-sort-numeric-asc | \f162 |
.fa-times-circle | \f057 | .fa-sort-numeric-desc | \f163 |
.fa-check-circle | \f058 | .fa-thumbs-up | \f164 |
.fa-question-circle | \f059 | .fa-thumbs-down | \f165 |
.fa-info-circle | \f05a | .fa-youtube-square | \f166 |
.fa-crosshairs | \f05b | .fa-youtube | \f167 |
.fa-times-circle-o | \f05c | .fa-xing | \f168 |
.fa-check-circle-o | \f05d | .fa-xing-square | \f169 |
.fa-ban | \f05e | .fa-youtube-play | \f16a |
.fa-arrow-left | \f060 | .fa-dropbox | \f16b |
.fa-arrow-right | \f061 | .fa-stack-overflow | \f16c |
.fa-arrow-up | \f062 | .fa-instagram | \f16d |
.fa-arrow-down | \f063 | .fa-flickr | \f16e |
.fa-mail-forward | \f064 | .fa-adn | \f170 |
.fa-share | \f064 | .fa-bitbucket | \f171 |
.fa-expand | \f065 | .fa-bitbucket-square | \f172 |
.fa-compress | \f066 | .fa-tumblr | \f173 |
.fa-plus | \f067 | .fa-tumblr-square | \f174 |
.fa-minus | \f068 | .fa-long-arrow-down | \f175 |
.fa-asterisk | \f069 | .fa-long-arrow-up | \f176 |
.fa-exclamation-circle | \f06a | .fa-long-arrow-left | \f177 |
.fa-gift | \f06b | .fa-long-arrow-right | \f178 |
.fa-leaf | \f06c | .fa-apple | \f179 |
.fa-fire | \f06d | .fa-windows | \f17a |
.fa-eye | \f06e | .fa-android | \f17b |
.fa-eye-slash | \f070 | .fa-linux | \f17c |
.fa-warning | \f071 | .fa-dribbble | \f17d |
.fa-exclamation-triangle | \f071 | .fa-skype | \f17e |
.fa-plane | \f072 | .fa-foursquare | \f180 |
.fa-calendar | \f073 | .fa-trello | \f181 |
.fa-random | \f074 | .fa-female | \f182 |
.fa-comment | \f075 | .fa-male | \f183 |
.fa-magnet | \f076 | .fa-gittip | \f184 |
.fa-chevron-up | \f077 | .fa-sun-o | \f185 |
.fa-chevron-down | \f078 | .fa-moon-o | \f186 |
.fa-retweet | \f079 | .fa-archive | \f187 |
.fa-shopping-cart | \f07a | .fa-bug | \f188 |
.fa-folder | \f07b | .fa-vk | \f189 |
.fa-folder-open | \f07c | .fa-weibo | \f18a |
.fa-arrows-v | \f07d | .fa-renren | \f18b |
.fa-arrows-h | \f07e | .fa-pagelines | \f18c |
.fa-bar-chart-o | \f080 | .fa-stack-exchange | \f18d |
.fa-bar-chart | \f080 | .fa-arrow-circle-o-right | \f18e |
.fa-twitter-square | \f081 | .fa-arrow-circle-o-left | \f190 |
.fa-facebook-square | \f082 | .fa-toggle-left | \f191 |
.fa-camera-retro | \f083 | .fa-caret-square-o-left | \f191 |
.fa-key | \f084 | .fa-dot-circle-o | \f192 |
.fa-gears | \f085 | .fa-wheelchair | \f193 |
.fa-cogs | \f085 | .fa-vimeo-square | \f194 |
.fa-comments | \f086 | .fa-turkish-lira | \f195 |
.fa-thumbs-o-up | \f087 | .fa-try | \f195 |
.fa-thumbs-o-down | \f088 | .fa-plus-square-o | \f196 |
.fa-star-half | \f089 | .fa-space-shuttle | \f197 |
.fa-heart-o | \f08a | .fa-slack | \f198 |
.fa-sign-out | \f08b | .fa-envelope-square | \f199 |
.fa-linkedin-square | \f08c | .fa-wordpress | \f19a |
.fa-thumb-tack | \f08d | .fa-openid | \f19b |
.fa-external-link | \f08e | .fa-institution | \f19c |
.fa-sign-in | \f090 | .fa-bank | \f19c |
.fa-trophy | \f091 | .fa-university | \f19c |
.fa-github-square | \f092 | .fa-mortar-board | \f19d |
.fa-upload | \f093 | .fa-graduation-cap | \f19d |
.fa-lemon-o | \f094 | .fa-yahoo | \f19e |
.fa-phone | \f095 | .fa-google | \f1a0 |
.fa-square-o | \f096 | .fa-reddit | \f1a1 |
.fa-bookmark-o | \f097 | .fa-reddit-square | \f1a2 |
.fa-phone-square | \f098 | .fa-stumbleupon-circle | \f1a3 |
.fa-twitter | \f099 | .fa-stumbleupon | \f1a4 |
.fa-facebook | \f09a | .fa-delicious | \f1a5 |
.fa-github | \f09b | .fa-digg | \f1a6 |
.fa-unlock | \f09c | .fa-pied-piper | \f1a7 |
.fa-credit-card | \f09d | .fa-pied-piper-alt | \f1a8 |
.fa-rss | \f09e | .fa-drupal | \f1a9 |
.fa-hdd-o | \f0a0 | .fa-joomla | \f1aa |
.fa-bullhorn | \f0a1 | .fa-language | \f1ab |
.fa-bell | \f0f3 | .fa-fax | \f1ac |
.fa-certificate | \f0a3 | .fa-building | \f1ad |
.fa-hand-o-right | \f0a4 | .fa-child | \f1ae |
.fa-hand-o-left | \f0a5 | .fa-paw | \f1b0 |
.fa-hand-o-up | \f0a6 | .fa-spoon | \f1b1 |
.fa-hand-o-down | \f0a7 | .fa-cube | \f1b2 |
.fa-arrow-circle-left | \f0a8 | .fa-cubes | \f1b3 |
.fa-arrow-circle-right | \f0a9 | .fa-behance | \f1b4 |
.fa-arrow-circle-up | \f0aa | .fa-behance-square | \f1b5 |
.fa-arrow-circle-down | \f0ab | .fa-steam | \f1b6 |
.fa-globe | \f0ac | .fa-steam-square | \f1b7 |
.fa-wrench | \f0ad | .fa-recycle | \f1b8 |
.fa-tasks | \f0ae | .fa-automobile | \f1b9 |
.fa-filter | \f0b0 | .fa-car | \f1b9 |
.fa-briefcase | \f0b1 | .fa-cab | \f1ba |
.fa-arrows-alt | \f0b2 | .fa-taxi | \f1ba |
.fa-group | \f0c0 | .fa-tree | \f1bb |
.fa-users | \f0c0 | .fa-spotify | \f1bc |
.fa-chain | \f0c1 | .fa-deviantart | \f1bd |
.fa-link | \f0c1 | .fa-soundcloud | \f1be |
.fa-cloud | \f0c2 | .fa-database | \f1c0 |
.fa-flask | \f0c3 | .fa-file-pdf-o | \f1c1 |
.fa-cut | \f0c4 | .fa-file-word-o | \f1c2 |
.fa-scissors | \f0c4 | .fa-file-excel-o | \f1c3 |
.fa-copy | \f0c5 | .fa-file-powerpoint-o | \f1c4 |
.fa-files-o | \f0c5 | .fa-file-photo-o | \f1c5 |
.fa-paperclip | \f0c6 | .fa-file-picture-o | \f1c5 |
.fa-save | \f0c7 | .fa-file-image-o | \f1c5 |
.fa-floppy-o | \f0c7 | .fa-file-zip-o | \f1c6 |
.fa-square | \f0c8 | .fa-file-archive-o | \f1c6 |
.fa-navicon | \f0c9 | .fa-file-sound-o | \f1c7 |
.fa-reorder | \f0c9 | .fa-file-audio-o | \f1c7 |
.fa-bars | \f0c9 | .fa-file-movie-o | \f1c8 |
.fa-list-ul | \f0ca | .fa-file-video-o | \f1c8 |
.fa-list-ol | \f0cb | .fa-file-code-o | \f1c9 |
.fa-strikethrough | \f0cc | .fa-vine | \f1ca |
.fa-underline | \f0cd | .fa-codepen | \f1cb |
.fa-table | \f0ce | .fa-jsfiddle | \f1cc |
.fa-magic | \f0d0 | .fa-life-bouy | \f1cd |
.fa-truck | \f0d1 | .fa-life-buoy | \f1cd |
.fa-pinterest | \f0d2 | .fa-life-saver | \f1cd |
.fa-pinterest-square | \f0d3 | .fa-support | \f1cd |
.fa-google-plus-square | \f0d4 | .fa-life-ring | \f1cd |
.fa-google-plus | \f0d5 | .fa-circle-o-notch | \f1ce |
.fa-money | \f0d6 | .fa-ra | \f1d0 |
.fa-caret-down | \f0d7 | .fa-rebel | \f1d0 |
.fa-caret-up | \f0d8 | .fa-ge | \f1d1 |
.fa-caret-left | \f0d9 | .fa-empire | \f1d1 |
.fa-caret-right | \f0da | .fa-git-square | \f1d2 |
.fa-columns | \f0db | .fa-git | \f1d3 |
.fa-unsorted | \f0dc | .fa-hacker-news | \f1d4 |
.fa-sort | \f0dc | .fa-tencent-weibo | \f1d5 |
.fa-sort-down | \f0dd | .fa-qq | \f1d6 |
.fa-sort-desc | \f0dd | .fa-wechat | \f1d7 |
.fa-sort-up | \f0de | .fa-weixin | \f1d7 |
.fa-sort-asc | \f0de | .fa-send | \f1d8 |
.fa-envelope | \f0e0 | .fa-paper-plane | \f1d8 |
.fa-linkedin | \f0e1 | .fa-send-o | \f1d9 |
.fa-rotate-left | \f0e2 | .fa-paper-plane-o | \f1d9 |
.fa-undo | \f0e2 | .fa-history | \f1da |
.fa-legal | \f0e3 | .fa-circle-thin | \f1db |
.fa-gavel | \f0e3 | .fa-header | \f1dc |
.fa-dashboard | \f0e4 | .fa-paragraph | \f1dd |
.fa-tachometer | \f0e4 | .fa-sliders | \f1de |
.fa-comment-o | \f0e5 | .fa-share-alt | \f1e0 |
.fa-comments-o | \f0e6 | .fa-share-alt-square | \f1e1 |
.fa-flash | \f0e7 | .fa-bomb | \f1e2 |
.fa-bolt | \f0e7 | .fa-soccer-ball-o | \f1e3 |
.fa-sitemap | \f0e8 | .fa-futbol-o | \f1e3 |
.fa-umbrella | \f0e9 | .fa-tty | \f1e4 |
.fa-paste | \f0ea | .fa-binoculars | \f1e5 |
.fa-clipboard | \f0ea | .fa-plug | \f1e6 |
.fa-lightbulb-o | \f0eb | .fa-slideshare | \f1e7 |
.fa-exchange | \f0ec | .fa-twitch | \f1e8 |
.fa-cloud-download | \f0ed | .fa-yelp | \f1e9 |
.fa-cloud-upload | \f0ee | .fa-newspaper-o | \f1ea |
.fa-user-md | \f0f0 | .fa-wifi | \f1eb |
.fa-stethoscope | \f0f1 | .fa-calculator | \f1ec |
.fa-suitcase | \f0f2 | .fa-paypal | \f1ed |
.fa-bell-o | \f0a2 | .fa-google-wallet | \f1ee |
.fa-coffee | \f0f4 | .fa-cc-visa | \f1f0 |
.fa-cutlery | \f0f5 | .fa-cc-mastercard | \f1f1 |
.fa-file-text-o | \f0f6 | .fa-cc-discover | \f1f2 |
.fa-building-o | \f0f7 | .fa-cc-amex | \f1f3 |
.fa-hospital-o | \f0f8 | .fa-cc-paypal | \f1f4 |
.fa-ambulance | \f0f9 | .fa-cc-stripe | \f1f5 |
.fa-medkit | \f0fa | .fa-bell-slash | \f1f6 |
.fa-fighter-jet | \f0fb | .fa-bell-slash-o | \f1f7 |
.fa-beer | \f0fc | .fa-trash | \f1f8 |
.fa-h-square | \f0fd | .fa-copyright | \f1f9 |
.fa-plus-square | \f0fe | .fa-at | \f1fa |
.fa-angle-double-left | \f100 | .fa-eyedropper | \f1fb |
.fa-angle-double-right | \f101 | .fa-paint-brush | \f1fc |
.fa-angle-double-up | \f102 | .fa-birthday-cake | \f1fd |
.fa-angle-double-down | \f103 | .fa-area-chart | \f1fe |
.fa-angle-left | \f104 | .fa-pie-chart | \f200 |
.fa-angle-right | \f105 | .fa-line-chart | \f201 |
.fa-angle-up | \f106 | .fa-lastfm | \f202 |
.fa-angle-down | \f107 | .fa-lastfm-square | \f203 |
.fa-desktop | \f108 | .fa-toggle-off | \f204 |
.fa-laptop | \f109 | .fa-toggle-on | \f205 |
.fa-tablet | \f10a | .fa-bicycle | \f206 |
.fa-mobile-phone | \f10b | .fa-bus | \f207 |
.fa-mobile | \f10b | .fa-ioxhost | \f208 |
.fa-circle-o | \f10c | .fa-angellist | \f209 |
.fa-quote-left | \f10d | .fa-cc | \f20a |
.fa-quote-right | \f10e | .fa-shekel | \f20b |
.fa-spinner | \f110 | .fa-sheqel | \f20b |
.fa-circle | \f111 | .fa-ils | \f20b |
.fa-mail-reply | \f112 | .fa-meanpath | \f20c |
.fa-reply | \f112 |
添加图标:before 和 :after css中用法的更多相关文章
- _ZNote_Qt_添加图标方法
简单来说就两步: 将icns图标添加入资源文件,例如picture.icns .pro文件中添加 (图标) ICON = picture.icns 程序中添加(程序窗口上显示) setWindowIc ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- 使用::befor和::after伪元素在网站中添加图标
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,: ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- css中vertical-align和line-height的用法
css中vertical-align和line-height的用法 1.先来看一种现象: (1).将一个图片放入一个div块中,div块背景颜色设置为aquamarine.将会发现图片与div块下边沿 ...
- 在Linux(Luna)下向Launch启动器中添加图标
记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...
- CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...
随机推荐
- SQL中的条件判断语句(case when zhen if,ifnull)用法
简介: case具有两种格式.简单case函数和case搜索函数.这两种方式,可以实现相同的功能.简单case函数的写法相对比较简洁,但是和case搜索函数相比,功能方面会有些限制,比如写判定式.还有 ...
- 基于SSH的J2EE Web系统配置文件
1. web.xml 关于Servlet Servlet是一个特殊的Java类,Servlet可以输出HTML标签作为表现层使用,但自从MVC规范出来以后,明确了Servlet的指责仅作为控制器使用, ...
- 关于Java中返回零长度数组或空集合比较好,还是返回null这个问题的一些想法
近日在方法返回类型为List数据类型时,返回结果为空集合比较好,还是null比较好的问题上有点纠结. 我觉得应该统一返回空集合,这样可以不用进行空指针的判断,不然又多了一个产生bug的可能性.而有人认 ...
- orcale 单行函数之数字函数, 日期函数
日期函数: 案例:
- orcale 多表连接
多表连接:
- ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧
这里藏的配置确实多.. 慢慢实践吧. <!DOCTYPE html> <html> <head> <title>ExtJs</title> ...
- javascript--闭包与this
理解javascript中的闭包与this http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html http: ...
- [Linux]Apache配置虚拟主机
Apache 配置虚拟主机的方式很多,种类也很多,主要分为两类: 基于名称的虚拟主机 (每个 IP 多个站点) 基于 IP 的虚拟主机 (每个 IP 一个站点) 基于名称的虚拟主机: www.2 ...
- caffe Solve函数
下面来看Solver<Dtype>::Solve(const char* resume_file) solver.cpp template <typename Dtype> v ...
- HTTP基本认证(Basic Authentication)的JAVA演示样例
大家在登录站点的时候.大部分时候是通过一个表单提交登录信息.可是有时候浏览器会弹出一个登录验证的对话框.例如以下图,这就是使用HTTP基本认证.以下来看看一看这个认证的工作过程:第一步: clien ...