css使用图标字体制作快捷导航

Web开发中的快捷导航常常使我们在设计网站时头疼不已， 有时用图片，有时用CSS。最近我发现使用图标字体可以非常有效地解决这个问题。

首先，我们需要在HTML文档中加载我们所选择的图标字体的CSS文件。可以使用Google Fonts或self-hosting（自己搭建服务器的方式）。以下是一个常用的例子:

接下来，我们需要用CSS代码来创建一个class，用于指定每个导航按钮的图标和颜色。 在这里我使用了FontAwesome图标字体库中的图标:

.nav-icon {
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #000;
}

现在，我们可以在HTML文档中建立一个导航列表，然后将每个导航按钮的class指向我们刚创建的"nav-icon"。以下是一个例子:

• 
• 
• 

现在每个导航按钮都有对应的FontAwesome图标，我们只需要设置他们的外观就可以了。以下是一个例子:

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list li {
    display: inline-block;
    margin: 0 10px;
}

.nav-list li a {
    text-decoration: none;
}

.nav-list li a:hover {
    color: #0070c9;
}

现在我们已经创建了一个使用图标字体制作的快捷导航，它看起来非常酷，而且还可以用CSS和JavaScript来进一步完善。 但是，请记住一点：不要让它变得太过冷酷和复杂。