1
我很抱歉這是一個非常業餘的問題。使用字體替換圖標在我的phpbb論壇
我不擅長這個東西，所以請原諒我對這件事的無知。我一直在學習，並且考慮到4個月前我沒有css或html知識，所以做得非常好。
我的網站是raider-forums.com，我想用我的圖標更換字體替換的外觀，我認爲這樣看起來更乾淨，特別是捏和縮放。
我發現icomoon這似乎對我的需求很大，我下載了zip文件，但真的不確定我會如何繼續。
我只需要知道我將如何改變其中的一個，我可以將其複製到其餘部分。例如在我的邊欄菜單上（使用artodia的helion風格）。
這裏是按鈕，我想嘗試和圖像切換到Web字體：
<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");
}
你是哪裏試圖定義字體？什麼是你正在工作的文件結構？有很多CSS顯示，但它似乎與問題無關，您能否回顧並給我們提供更好的資源來幫助您？ – falsarella
對於包含所有的代碼我很抱歉，我只是不確定我需要做什麼來完成此任務，並且我包含了我知道的與我的網站上的這些圖像（側欄上的菜單）相關的代碼。 – corleoner
嗯。 。 .guess不打進入大聲笑，我是一個新手在這裏。無論如何，我只是想從這樣的網站換出.png圖片作爲字體圖標：http://icomoon.io/我希望我知道你所引用的資源，我對知識略有缺乏在這個時候，但是忍耐着我，我盡力快速學習。我所包含的是兩個.css文件和一個菜單的html文件。我可以包含哪些具體內容，以便讓別人更容易找到我需要編輯的部分以及需要添加哪些文件才能使用這些Web字體？ – corleoner