网页设计之侧边框菜单栏的设计

通过学习17sucai网上的案例，我打算在网页左边设置以Iconfont为图标的菜单栏，通过之前的学习我们知道，菜单栏就是相当于链接的列表。首先我们第一步要完成从Iconfont网上找到我们需要的图标，根据我的需求——我的菜单需要有导入，维护，展示，任务管理以及权限管理这些功能，因此我在Iconfont找到这些图标。

我采用的引用这些图标的方法是第一种Unicode方法：（这种方法适用性最强，但是没有色彩）
首先通过Unicode方法得到font-face的代码（相当于引用到这些图标，并且把这些图标转换成字体，可以通过iconfont这个类去设置图标的属性，并且图标的代码就是名称下面那串）：

@font-face {
  font-family: 'iconfont';  /* project id 1298408 */
  src: url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.eot');
  src: url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.woff') format('woff'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.svg#iconfont') format('svg');
}

设置iconfont

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

最后，选择合适的位置根据图标代码应用我们的图标。

<i class="iconfont">&#x33;</i>

现在我们拥有形状为这些图标的字体，下面我们来设置我们的侧边框：
尝试一个早上之后，发现怎样都不怎么好看。然后看别人的项目是集合Layui来设计，因此我想单独创建一个侧边框的项目来练习一下：
出现的问题有：
1.点击菜单链接按钮，按钮显示不完全
2.大小控制不好
反思：
先要自己想好一个“容器”套一个容器，依此的顺序是什么样子的，还有背景颜色设置，要在哪一个标签里面，配色可以找找网上优秀的例子来学习。
最后的成果：

代码如下：

.leftside-nav {
				list-style-type: none;
				margin:0 ;
				font-size: 14px;
				font-weight: 560;
				padding: 0;
				width: 200px;
				background-color: none;
			}
			
			.leftside-nav .leftside-nav-item {
				line-height: 40px;
			}


			.leftside-nav .leftside-nav-item a {
				display: block;
				color: darkslateblue;
				padding: 0px 16px;
				text-decoration: none;
			}
			
			.leftside-nav .leftside-nav-item a.active {
				color:  darkslateblue;
				background-color: transparent;
			}


			.leftside-nav .leftside-nav-item a:hover:not(.active) {
				color: white;
				background-color: darkslateblue ;
			}