Question

我道歉这是一个非常业余的问题。

我对这些东西不是很擅长，所以请原谅我对这些东西的无知。考虑到4个月前我没有css或html知识，我一直在学习，并且做得很好。

我的网站是raider-forums.com，我想用我的图标替换字体替换外观，我觉得它看起来更干净，特别是捏和缩放。

我发现icomoon似乎对我的需求很好，我下载了zip文件，但我真的不确定如何继续。

我只需要知道如何更改其中一个，我可以将其复制到其余部分。例如在我的侧边栏菜单上（使用artodia的helion风格）。

以下是我想尝试从图片更改为网络字体的按钮：

<ul class="menu">
    <li class="menu-item menu-section"><p>Sample Links</p></li>
    <li class="menu-item"><a href="#">Normal Link</a></li>
    <li class="menu-item menu-home"><a href="#">Home</a></li>
    <li class="menu-item menu-forum"><a href="#">Forum</a></li>
    <li class="menu-item menu-pm"><a href="#">Private Message</a></li>
    <li class="menu-item menu-ucp"><a href="#">User Control Panel</a></li>
    <li class="menu-item menu-users"><a href="#">Users List</a></li>
    <li class="menu-item menu-login"><a href="#">Log In</a></li>
    <li class="menu-item menu-search"><a href="#">Search</a></li>
    <li class="menu-item menu-down"><a href="#">Down Arrow</a></li>
    <li class="menu-item menu-link"><a href="#">Link</a></li>
</ul>

来自common.css：

/*
   Menu
*/
.phpbb ul.menu {
   padding-bottom: 4px;
   margin: -1px 0 0;
}
.phpbb ul.menu-nopadding {
   padding-bottom: 0;
}
.phpbb ul.menu-nopadding + ul.menu {
   margin-top: 0;
}
.phpbb .menu > li {
   width: 200px;
}
.phpbb .menu li.menu-form {
   padding: 2px;
   width: 196px;
}
.phpbb .menu li.menu-item, .phpbb .menu li.menu-section {
   display: block;
   background: transparent none 0 -30px no-repeat;
   width: 190px;
   margin: 0 0 2px;
   padding: 0 0 0 10px;
}

.phpbb .menu li.menu-item a, .phpbb .menu li.menu-section a, .phpbb .menu li.menu-section p {
   display: block;
   background: transparent none 100% 0 no-repeat;
   text-decoration: none;
   margin: 0;
   padding: 7px 10px 0 0;
   height: 22px;
   text-align: left;
   text-indent: 10px;
   line-height: 1.2em;
   white-space: nowrap;
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   outline-style: none;
}
.phpbb .menu li.menu-section.expandable a {
   max-width: 160px;
   padding-left: 10px;
   padding-right: 20px;
}
.phpbb .menu li.menu-section {
   background-position: 0 0;
}

.phpbb .menu li.menu-section a, .phpbb .menu li.menu-section p {
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   background-position: 100% -30px;
   text-align: center;
   padding-top: 6px;
   height: 23px;
}
.phpbb .menu li.menu-section a:hover {
   text-decoration: underline;
}

.phpbb .menu li.menu-home {
   background-position: 0 -60px;
   padding-left: 27px;
   width: 173px;
}
.phpbb .menu li.menu-forum {
   background-position: 0 -90px;
   padding-left: 27px;
   width: 173px;
}
.phpbb .menu li.menu-pm {
   background-position: 0 -120px;
   padding-left: 28px;
   width: 172px;
}
.phpbb .menu li.menu-ucp {
   background-position: 0 -150px;
   padding-left: 29px;
   width: 171px;
}
.phpbb .menu li.menu-down {
   background-position: 0 -180px;
   padding-left: 27px;
   width: 173px;
}
.phpbb .menu li.menu-login {
   background-position: 0 -210px;
   padding-left: 30px;
   width: 170px;
}
.phpbb .menu li.menu-search {
   background-position: 0 -240px;
   padding-left: 30px;
   width: 170px;
}
.phpbb .menu li.menu-users {
   background-position: 0 -270px;
   padding-left: 28px;
   width: 172px;
}
.phpbb .menu li.menu-faq {
   background-position: 0 -300px;
   padding-left: 25px;
   width: 175px;
}
.phpbb .menu li.menu-link {
   background-position: 0 -330px;
   padding-left: 25px;
   width: 175px;
}
.phpbb .menu li.icon-thanks {
   background-position: 0 -360px;
   padding-left: 25px;
   width: 175px;
}

.phpbb .menu li.icon-points {
   background-position: 0 -390px;
   padding-left: 25px;
   width: 175px;
}

.phpbb .menu li.icon-quiz {
   background-position: 0 -450px;
   padding-left: 25px;
   width: 175px;
}

.phpbb .menu li.icon-arcade {
   background-position: 0 -480px;
   padding-left: 25px;
   width: 175px;
}

.phpbb .menu li.icon-bump {
   background-position: 0 -420px;
   padding-left: 25px;
   width: 175px;
}

和colours.css：

.phpbb .menu li.menu-item, .phpbb .menu li.menu-section {
   background-image: url("{T_THEME_PATH}/images/menu_left.png");
}
.phpbb .menu li.menu-item a, .phpbb .menu li.menu-section a, .phpbb .menu li.menu-section p, .phpbb li.menu-form input.button-icon {
   background-image: url("{T_THEME_PATH}/images/menu_right.png");
}

.phpbb .menu li.menu-item {
   background-color: #393939;
   border-style: outset;
   border-width: 2px;
   border-color: #999999;
}
.phpbb .menu li.menu-item:hover {
   background-color: #181818;
}
.phpbb .menu li.menu-item.active {
   background-color: #565656;
   border-style: inset;
   border-width: 2px;
   border-color: #aaaaaa;
   color: #bbb !important;
}
.phpbb .menu li.menu-section, .phpbb li.menu-form input.button-icon {
   background-color: #181818;
}
.phpbb .menu li.menu-section:hover, .phpbb li.menu-form input.button-icon:hover {
   background-color: #181818;
}

.phpbb .menu li.menu-item a {
   color: #dddddd;
}
.phpbb .menu li.menu-item:hover a {
   color: #555555;
}
.phpbb .menu li.menu-item.active a {
   color: #bbb;
   font-weight: bold;
}

.phpbb .menu li.menu-section p, .phpbb .menu li.menu-section a {
   color: #000 !important;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.phpbb li.menu-form input.inputbox.search {
   background-image: url("{T_THEME_PATH}/images/input_search.png");
}
.phpbb li.menu-form input.inputbox.login {
   background-image: url("{T_THEME_PATH}/images/input_user.png");
}
.phpbb li.menu-form input.inputbox.password {
   background-image: url("{T_THEME_PATH}/images/input_pass.png");
}

Answer 1

某些.css文件中的某个位置可能会定义要使用font-family的内容。

您应该删除它并按照此处所述添加@font-face：

http://www.html5rocks.com/en/tutorials/webfonts/quick/

在我的phpbb论坛上使用字体替换图标

1 个答案: