我已经在网站上工作了一段时间，并且在开发部分结束时遇到了一些需要解决的小问题，但首先是一些背景故事！
我正在使用一个名为Oneengine的wordpress主题（如果你想要顺便创建一个视差网站，这真的很棒），并且在其中它包含了可以使用的各种不同的工具。
我迫切需要帮助的一些事情，如果有人能提供帮助，我将非常感激，我真的最终将它整理出来并接近完成它！
有没有办法将社交媒体图标置于页面底部？ 目前我只使用Twitter＆amp; Linkedin并不认为它需要其他社交媒体图标。由于可以显示（但不是）的图标数量，Twitter / Linkedin图标稍微偏离。有没有办法解决这个问题，以便两个品牌中间的分隔线位于网站的中间？
更改联系人图标的大小和位置？ 是否有可能改变它们的定位方式？出于某种原因，手机图标太高而且需要降低（仅几个像素）以及稍微大一些（再次，几个像素）我在哪里可以找到并调整图标？
让社交媒体图标更大？ 与联系人图标类似，我如何调整社交媒体图标的大小？
以下是我用于页脚的代码，如果有人可以查看它并让我知道我需要做些什么才能做出这些非常酷的修正。
</div><!-- #content -->
<div class="clearfix"></div>
<?php if(is_front_page()){ ?>
<center><footer id="contact" class="site-footer template-wrap" role="contentinfo">
<?php
$color = oneengine_option('footer_blog_color');
$img = oneengine_option('footer_blog_img', false, 'url');
$repeat = oneengine_option('footer_blog_repeat');
$parallax = oneengine_option('footer_blog_parallax');
$cover = oneengine_option('footer_blog_cover');
$bg_repeat = '';
if( $repeat == 1 || $repeat == true){
$bg_repeat = 'background-repeat:no-repeat;';
}else $bg_repeat = 'background-repeat:repeat;';
$bg_cover = '';
if( $cover == 1 || $cover == true){
$bg_cover = 'background-size:cover;';
}else $bg_cover = '';
$bg_img = '';
if( $img ){
$bg_img = 'background-image:url('.$img.');';
}else $bg_img = '';
$img = ( ! empty ( $img ) ) ? ''.$bg_img.'' : '';
$color = ( ! empty ( $color ) ) ? 'background-color:'. $color .';' : '';
$repeat = ( ! empty ( $repeat ) ) ? ''. $bg_repeat .'' : '';
$cover = ( ! empty ( $cover ) ) ? ''. $bg_cover .'' : '';
$parallax = ( ! empty ( $parallax ) ) ? 'background-attachment: fixed;': '';
/** Style Container */
$style = (
! empty( $img ) ||
! empty( $color ) ||
! empty( $repeat ) ||
! empty( $cover ) ||
! empty( $parallax ) ) ?
sprintf( '%s %s %s %s %s', $img, $color, $repeat, $cover, $parallax ) : '';
$css = '';
if ( ! empty( $style ) ) {
$css = 'style="'. $style .'" ';
}
?>
<div class="footer-img" <?php echo $css ?>></div>
<div class="container">
<div class="row">
<?php
$color_title = oneengine_option('footer_blog_title_color');
$color_sub_title = oneengine_option('footer_blog_subtitle_color');
$color_title = ( ! empty ( $color_title ) ) ? 'color:'. $color_title .';' : '';
$color_sub_title = ( ! empty ( $color_sub_title ) ) ? 'color:'. $color_sub_title .';' : '';
/** Style Container */
$title_color = (
! empty( $color_title ) ) ?
sprintf( '%s', $color_title) : '';
$css_title_color = '';
if ( ! empty( $title_color ) ) {
$css_title_color = 'style="'. $title_color .'" ';
}
$sub_title_color = (
! empty( $color_sub_title ) ) ?
sprintf( '%s', $color_sub_title) : '';
$css_sub_title_color = '';
if ( ! empty( $sub_title_color ) ) {
$css_sub_title_color = 'style="'. $sub_title_color .'" ';
}
?>
<div class="col-md-12">
<div class="heading-title-wrapper" style="color">
<h2 class="title" <?php echo $css_title_color ?>><margin-top= 30px><?php echo oneengine_option('footer_blog_title') ?></h2>
<span class="line-title" style="background-color:#65b32e"></span>
<span class="sub-title" <?php echo $css_sub_title_color ?>><?php echo oneengine_option('footer_blog_subtitle') ?></span>
</div>
</div>
<div class="clearfix"></div>
<div class="list-contact-wrapper">
<?php if(oneengine_option('email_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-envelope"></i></span>
<p><?php echo nl2br(oneengine_option('email_footer')); ?></p>
</div>
</div>
<?php } ?>
<?php if(oneengine_option('address_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-map-marker"></i></span>
<p><?php echo nl2br(oneengine_option('address_footer')); ?></p>
</div>
</div>
<?php } ?>
<?php if(oneengine_option('phone_footer') != '') {?>
<div class="col-md-4">
<div class="contact-wrapper">
<span class="icon"><i class="fa fa-phone"></i></span>
<p><?php echo nl2br(oneengine_option('phone_footer')); ?></p>
</div>
</div>
<?php } ?>
</div>
<div class="clearfix"></div>
<?php if(oneengine_option('contact_form') != '') {?>
<div class="contact-form-wrapper">
<h2 class="contact-title"></h2>
<?php echo do_shortcode( oneengine_option('contact_form') ); ?>
</div>
<?php } ?>
</div>
</div>
<div style = "center">
<div class="site-info">
<ul class="social-footer">
<?php if(oneengine_option('twitter') != '') {?>
<li><a href="<?php echo oneengine_option('twitter'); ?>"><i class="fa fa-twitter"></i></a></li>
<?php } ?>
<?php if(oneengine_option('linkedin') != '') {?>
<li><a href="<?php echo oneengine_option('linkedin'); ?>"><i class="fa fa-linkedin"></i></a></li>
<?php } ?>
</ul>
<div class="copyright">
<?php echo nl2br(oneengine_option('copyright')); ?>
<br>
</div><!-- .site-info -->
</footer><!-- #colophon -->
<?php } ?>
</div></div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
在这里可以找到我建立的网站：http://www.jamiebull.co.uk/Meadows_site/所以你知道我在说什么。
感谢您的期待！
答案 0 :(得分：0)
编辑：我应该注意，我不熟悉这个主题。但是许多现代和更高级的主题都有特殊的主题设置，其中包含用于添加CSS的特定字段。有些主题甚至会使用这些字段自动生成styles.css。
因此，根据主题，您可能需要在主题设置中的这些特定字段中为这些元素定义CSS，而不是直接添加到styles.css，这可能会被覆盖。
嗯，事实证明，联系人和社交媒体图标实际上只是主题中包含的字体中的字符。
这意味着您只需向styles.css添加一些信息并更改字体大小，行高等，它就会更新这些图标。
因此，通过添加或更改styles.css，您可以覆盖其尺寸/位置。看起来这些元素的CSS已经在styles.css中定义了（但这可以根据主题的工作原理自动生成），所以在添加新内容之前要先更改它们。
带有社交图标的页脚为.social-footer，您似乎已经在styles.css中定义了一些CSS。看起来您已经定义了padding:0;，但主题似乎会自动解释丢失的图标？如果我删除padding:0;，则图标似乎居中。
对于社交图标本身，这里是CSS的大小：
.social-footer li {
/* Probably you have some other stuff defined here already...*/
font-size: 18px; /* This line controls the size of the icons. */
}
至于联系人图标，图标本身实际上都是正确对齐的，但我猜电话图标只是在字体本身中用更多的空格绘制。
联系人图标本身属于班级fa，而电话图标则属于班级fa-phone。如果您想手动将其向下移动，可以添加类似的内容（您似乎还没有定义fa-phone）：
.fa-phone {
font-size: 18px; /* This is what the icons are set to now. Increase to make bigger */
line-height: 2.2; /* This is what the icons are set to now. Increase to move further down */
}
希望这就是你要找的东西！
如果您需要了解特定元素的类或想要动态使用CSS，Google Chrome的元素检查器和其他开发工具都非常棒。只需在Chrome中点击F12或右键单击并选择＆＃34; Inspect Element＆＃34;。
答案 1 :(得分：0)
要集中社交媒体图标，您需要在样式表的底部添加以下CSS：
.social-footer li {
margin: 0px;
border-right: 0px;
padding-right: 0px;
}
.social-footer li:first-child {
border-right: 1px solid white;
padding-right: 10px;
margin-right: 10px;
}
要增加联系人图标的大小并调整其行高，您需要使用CSS定位每个图标。例如，如果您想增加手机图标的大小并调整其上边距，则需要使用以下代码：
.fa-phone {
font-size: 25px !important;
line-height: 2 !important;
}
要定位地图图标和信封图标，您需要在上面的代码中分别使用fa-map-marker和fa-envelope代替.fa-phone。
要增加页脚中社交媒体图标的大小，您需要在样式表的botoom中添加以下CSS：
.social-footer .fa {
font-size: 25px;
}