将自定义图标添加到HTML页面 [英] Adding Custom icon to HTML Page

问题描述

我发现了使用i元素将默认图标添加到任何HTML页面的方法: W3.CSS图标

I found this way to add default icons to any HTML page using i element : W3.CSS Icons

我可以通过添加图像来使用与自定义图标相同的方式吗?

Can I use the same way to have custom icon with the same way by adding my image?

更改后添加标记:

                      <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>

推荐答案

可以，尽管取决于您要如何处理它.

Sure, although it depends on how you want to handle it.

关于图标字体

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

Most of the images used in your examples are actually based on fonts that was create map each glyph to a specific Unicode value and then use CSS classes to set the content property to that specific value, thus displaying the icon. It's unlikely that you would want to make a font to do just that, but there are quite a few out there that you might want to explore if you want to use a uniform set of icons for your site or application.

使用CSS类

一种更简单的方法是创建一个CSS类，该类指向您的特定图像作为背景，并设置容纳该图像所需的空间量:

A simpler approach would be to create a CSS class that points to your specific image as a background and sets the amount of space necessary to accommodate it :

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

然后，您只需创建一个具有该CSS类的元素即可显示您的图标:

You would then need to just create an element that has that CSS class to display your icon :

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

示例

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

<i class='icon'></i>

这篇关于将自定义图标添加到HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！