CSS网页使用Font Awesome图标字体时，css定义 content 属性

来源：互联网发布：网络歌曲好想好想你编辑：程序博客网时间：2024/05/20 00:51

今天在参考他人的Personal Portfolio Webpage的时候，发现一个觉得很棒的想法，因此在这里记录下来。

这是Personal Portfolio Webpage的原链接：

https://codepen.io/freeCodeCamp/pen/YqLyXB（需要翻墙才能查看）

功能实现的效果是这样的：

是不是觉得很简单，这个里面涉及到两个知识点，一个是图标字体的使用，还有一个就是相对定位。

（1）先说图标字体Font Awesome

网页使用图标字体时，css定义content属性和font-family属性必不可少，而font-size属性则是用来调节字体大小的，如下所示：

.hr.star-bright:after, hr.star-dark:after{content:'\f121';font-family:FontAwesome;font-size:2em;display:inline-block;position:relative;top:-.8em;padding:0 .25em;}

在这里列举几百个常见的content代码，以供使用：

在使用中，我们也可以不用content属性类来输出 font awesome图标，而是直接输出font awesome图标，例如：

当然，在那之前我们需要先写一个css引人font awesome图标字库（注意文件路径），方法如下：

注意：不用content属性类来输出font awesome字体的时候，图标代码与content的编码一样，只是要把前面的反斜杠“\”替换为“&#x”。

（2）再说相对定位，position:relative。以后再补充，还没想好写什么。

（3）最后附上原文链接以及个人认为很棒的Personal Portfolio Webpage地址，共勉励：

原文链接：http://www.shouyeli.com/1677
Personal Portfolio Webpages:

https://codepen.io/freeCodeCamp/pen/YqLyXB

http://codepen.io/lucaslmuller/pen/QjYodV

http://ahadaily.com/personal-portfolio.html

0 0