字体图标

字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。


What’s Cool About PHP

今天是在DotNetNuke平台工作一周年的日子,值得纪念一下。回过头来看,这一年基本上是与DotNetNuke的bug斗争中走过的,同时见证了版本5到6的重大升级。DotNetNuke的框架是挺值得学习和借鉴的,非常全面的系统管理功能和超强的扩展能力让它始终在CMS这一块占据一席之地。

获取字体图标

我们已经在 环境安装 章节下载了 Bootstrap 3.x
版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css
文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

May 26, 2008

我大部分工作是在后台开发,也即开发或者更新一些模块(module)来迎合客户的需要。但有时候,在客户那里工作时(俗称外包),必须为他们的内部网站设计布局和页面。这是我相当头疼的问题,虽然客户只有一个要求就是漂亮好看,但我始终觉得Dotnetnuke是众多CMS中外观最丑的。

字体图标列表

点击这里,查看可用的字体图标列表。


 

 幸运的是,DNN提供了异常方便和强大的Skin系统,可以让开发者随意便捷的设计主题。不幸的是,它过于有层次感,让我经常迷惑在CSS的覆盖和Javascript的冲突中。另外,不知道是不是因为我不是专业网站设计的缘故,自己搞出来的东东总是让我很郁闷。

CSS 规则解释

下面的 CSS 规则构成 glyphicon class。

@font-face {    font-family: 'Glyphicons Halflings';    src: url('../fonts/glyphicons-halflings-regular.eot');    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');  }    .glyphicon {    position: relative;    top: 1px;    display: inline-block;    font-family: 'Glyphicons Halflings';    -webkit-font-smoothing: antialiased;    font-style: normal;    font-weight: normal;    line-height: 1;    -moz-osx-font-smoothing: grayscale;  }

所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family
和位置。

.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为
inline-block,声明字体,规定 font-style 和 font-weight 为
normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing:
antialiased
 和 -moz-osx-font-smoothing:
grayscale;
 获得跨浏览器的一致性。

然后,这里的

.glyphicon:empty {    width: 1em;  }

是空的 glyphicon。

这里有 200 个 class,每个 class 针对一个图标。这些 class
的常见格式如下:

.glyphicon-keyword:before {    content: "hexvalue";  }

 

比如,使用的 user 图标,它的 class 如下:

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

 


PHP给人印象最深的莫过于:你不必因为想要用好它就去深入了解这种语言。想一想,在你所知道的语言中有多少能做到这一点呢?其中比较明显的一个就是java了,仅编一个hello
world就需要了解不少的知识,更别提创建一个web应用程序了。但对PHP,这些都不在话下。**

在外包的日子,总有些闲暇的时间,我就会寻找或尝试一些CSS框架来为我的DNN主题设计找出路,这样不但可以方便我前端的工作,更重要的是,CSS框架可以帮助我搭建一个漂亮,简洁和清爽的网站。

用法

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

下面的实例演示了如何使用字体图标:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 如何使用字体图标</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <p>     <button type="button" >             </button>     <button type="button" >             </button>     <button type="button" >             </button>     <button type="button" >             </button>  </p>  <button type="button" >     User  </button>  <button type="button" >     User  </button>  <button type="button" >     User  </button>      </body>  </html>

结果如下所示:

图片 1


应该说PHP在访问Bad Behavior时比Perl还是强一点点的。记得在Web刚兴起的那段日子,听到人们常说他们将用Perl创建大型程序,虽然也知道(没有办法说服他们)最终会失败。

 

带有导航栏的字体图标

<!DOCTYPE html>  <html>    <head>      <title>导航栏的字体图标</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- Bootstrap -->      <link   rel="stylesheet">      <style>      body {      padding-top: 50px;      padding-left: 50px;      }      </style>      <!--[if lt IE 9]>        <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>      <![endif]-->    </head>    <body>      <div  role="navigation">        <div >          <div >            <button type="button"  data-toggle="collapse" data-target=".navbar-collapse">              Toggle navigation                                                      </button>            <a   >Project name</a>          </div>          <div >            <ul >              <li ><a  >Home</a></li>              <li><a  >Shop</a></li>              <li><a  >Support</a></li>            </ul>          </div><!-- /.nav-collapse -->        </div><!-- /.container -->      </div>      <!-- jQuery (Bootstrap 插件需要引入) -->      <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>      <!-- 包含了所有编译插件 -->      <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>    </body>  </html>        

定制字体图标

我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。

我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码:

<button type="button" >     User  </button>

效果如下所示:

另一方面,PHP确实具有创建一些较大程序的能力,比如Drupal。我的朋友Nancy
Nicolaisen(也是这里的Blogger)说她想建立一个旅游网站,我建议她看看Drupal。她照做了,并最终选择了它。因为在她看来Drupal的用户社区太优秀了,为她在建立站点并顺利上线提供了大量的帮助。

我的第一个目标是Blueprint,它是一个CSS框架,其目的是减少你的开发时间。它提供了坚实的CSS基础,易使用的网格,合理的排版,有用的插件,甚至印刷样式让你轻松的建立项目。好景不长,没用几天就放弃了,原因有二:

定制字体尺寸

通过增加或减少图标的字体尺寸,您可以让图标看起来更大或更小。

<button type="button"   >     User  </button>

PHP让菜鸟快速上手并直接去做他们感兴趣的东西,而无须关心那些繁杂的编程理论和实践。你只要去做就可以在网页上得到想要的。

  1. Doc看的比较吃力,思路不清晰。
  2. 没有想象中的强大,总觉得只有CSS不够用。

发表评论