Question

我发现这种方法可以使用i元素将默认图标添加到任何HTML页面： W3.CSS Icons

我可以通过添加图片以相同的方式使用相同的方式来设置自定义图标吗？

更改后添加标记：

                      <li class="treeview">
                    <a href="#"><span class="icon"></span><span>Main Itmes</span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="/Page1.aspx">Item1</a>
                        </li>
                        <li>
                            <a href="/Page2.aspx">Item2</a>
                        </li>
                                                    <li>
                            <a href="/Pagee3.aspx">Item3</a>
                        </li>
                    </ul>
                </li>

CSS：

        <style>
            .icon {
        background: url("Images/logo.png");
        height: 20px;
        width: 20px;
        display: block;
        /* Other styles here */
    }
  </style>

Answer 1

当然，虽然这取决于你想如何处理它。

关于图标字体

您的示例中使用的大多数图像实际上都是基于创建的字体，将每个字形映射到特定的Unicode值，然后使用CSS类将content属性设置为该特定值，从而显示图标。你不太可能想要制作一种字体来做到这一点，但如果你想为你的网站或应用程序使用一套统一的图标，那么你可能想要探索很多。< / p>

使用CSS类

更简单的方法是创建一个CSS类，将特定图像指向背景，并设置容纳它的空间量：

.icon {
    background: url('your-image-url.jpg');
    height: 20px;
    width: 20px;
    display: block;
    /* Other styles here */
}

然后，您需要创建一个具有该CSS类的元素来显示您的图标：

<span class='icon'></span>

示例

＆＃13;
＆＃13;
.icon { background: url('http://s.mobileread.com/i/icons/icon7.gif'); height: 16px; width: 16px; display: block; /* Other styles here */ }
＆＃13;
<i class='icon'></i>
＆＃13;
＆＃13;
＆＃13;

Answer 2

是的，您可以将自定义图标添加到span或i。

为您的范围命名。
将图标设置为背景图像。设置背景大小。
如果不起作用，请将样式添加到span，并将宽度和高度设置为与设置为background-size相同。

Answer 3

.container{
	width:700px;
	height:700px;
	margin-top:50px;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  float:left;
}

.title {
  color: grey;
  font-size: 18px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}
.card1{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin-left:6px;
  
  text-align: center;
  float:left;
}

<html>
<head>
<!-- Add icon library -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container">
<div class="card">
  <img src="g.jpg" alt="John" style="width:50%">
  <h1>Bilal</h1>
  <p class="title">CEO & Founder, Example</p>
  <p>Stacker </p>
  <p>
  <a href="#"><img title="facebook" alt="facebook" src="fb.png" width="30px"></a> 
  <a href="#"><img title="facebook" alt="facebook" src="t.png " width="30px></a> 
  <a href="#"><img title="facebook" alt="facebook" src="i.png " width="30px ></a> 
  <a href="#"><i class="fa fa-facebook"></i></a> 
  </p>
  <p><button>Contact</button></p>
</div>
<div class="card1">
  <img src="g.jpg" alt="John" style="width:50%">
  <h1>Bilal</h1>
  <p class="title">CEO & Founder, Example</p>
  <p>Stacker </p>
  <p>
  <a href="#"><img title="facebook" alt="facebook" src="fb.png" width="30px"></a> 
  <a href="#"><img title="facebook" alt="facebook" src="t.png " width="30px></a> 
  <a href="#"><img title="facebook" alt="facebook" src="i.png " width="30px ></a> 
  <a href="#"><i class="fa fa-facebook"></i></a> 
  </p>
  <p><button>Contact</button></p>
</div>
</div>
</body>

将自定义图标添加到HTML页面

3 个答案: