I apologize this is a very amateurish question.
I'm not very good at this stuff, so pardon me for my ignorance on this stuff. I've been learning as I go and have done pretty good considering I had zero css or html knowledge 4 months ago.
My site is raider-forums.com, and I'd like to update the look with font replacement for my icons, which I think give a much cleaner look, especially with pinch and zoom.
I found icomoon which seems great for my needs, and I downloaded the zip file, but really am unsure how I would proceed.
I just need to know how I would change one of these, and I can copy it into the rest. For example on my sidebar menu (using helion style by artodia).
Here are the buttons I'd like to try and change from images to web font:
html file for sidebar
<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;
}
my colours.css for this menu
.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);
}
