I need to adapt a site to IE-7 in compatibility mode, I've searched some libraries for bootstrap to work, tried the same to use icons ( Font-Awesome , glyphicon ).
Questions I have?
How can I use the icons in IE-7.
How do I make an image load 100% into an undistorted div.
Follow site image in version for chrome and most current browsers:
AlreadyinIE-7compatibilityisthisbeauty: 
I'm studying CSS to get a better result, or more acceptable for this scenario, I'll appreciate any suggestions or help, here's what I've tried:
.group{
text-align:center;
height:800px;
z-index:1;
top:70px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
.fixed-top{
position: fixed;
top: 0;
height: 70px;
z-index: 1000;
}
.title{
font-weight: 700px;
text-transform: uppercase;
font-size: 50px;
line-height: 100px;
box-sizing: inherit;
}
#top{
width:100%;
padding-top:70px;
text-align:center;
border-bottom: 1px solid;
color:white;
margin: 0;
background: url("https://uploaddeimagens.com.br/images/001/111/501/original/header2.jpg?1506619323") center;
background-size: 100%;
}
#about{
background-color: #e20613 !important;
color:white;
}
img{
height: 33%;
width: 33%;
}
/* Também incluo o Bootstrap-IE7Fix
* Bootstrap 3 IE7 Fix v0.3
* https://github.com/LPology/Bootstrap-IE7Fix
*/<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<head>
<meta content="ie=7.0000" http-equiv="x-ua-compatible">
<title>Inpart Saúde</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="description" content="sistema inpart saúde">
<link rel="shortcut icon" href="/favicon.ico">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
</head>
<body class="bgsCover">
<div id="wrap">
<div class="navbar navbar-default fixed-top">
<div class="container">
<a href="#login" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
Acesso ao sistema
</a>
<a href="#contact" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
Contatos
</a>
<a href="#solution" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
Soluções
</a>
<a href="#services" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
Serviços
</a>
<a href="#about" class="navbar-toggle link" data-target=".navbar-collapse" data-toggle="collapse">
Empresa
</a>
<a class="navbar-brand logo" href="#">
<img alt="Inpart Saúde" src="includes/InpartSaude.png" style="width:13%">
</a>
</div>
</div>
<div class="group" id="top">
<div class="container">
<h4 class="title">Missão & Visão</h4>
<div class="col-sm-12">
<h2>Integrante do GRUPO INPART SERVIÇOS, a INPART SAÚDE nasceu em 2004 com o objetivo de atender as necessidades das empresas atuantes no mercado de saúde, através da criação e disponibilização de um sistema integrado de gerenciamento de processos de cotação e compra e de informações de materiais médico-hospitalares de alto custo, baseado na Internet.</h2>
<p>
<a class="btn btn-lg learn-more-btn" id="btn-about" href="#about">
Saiba mais »
</a>
</p>
</div>
</div>
</div>
<div class="group" id="about">
<div class="container">
<h4 class="title">Foco e Especialização</h4>
<div class="col-sm-12">
<h2>Nossa especialização objetiva promover a otimização do processo de fornecimento de materiais especiais/de alto custo, a melhoria na qualidade e agilidade de acesso às informações, fomentando a interação entre os agentes de mercado, através de módulos on-line de interface amigável, contribuindo com os processos de gestão, gerando resultados concretos.</h2>
<p>
<a class="btn btn-lg learn-more-btn" id="btn-services" href="#services">
Descubra as vantagens »
</a>
</p>
</div>
</div>
</div>
<div class="group" id="services">
<div class="container">
<h4 class="title">Serviços com vantagens exclusivas</h4>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
<h3>Tecnologia</h3>
<p class="description">Cotação e Compras on-line em tempo real.</p>
<p class="description">Alta tecnologia em desenvolvimento de sistemas.</p>
<p class="description">Módulos de sistema de interface amigável ao usuário.</p>
<p class="hidden-xs">
</div>
<div class="col-sm-3">
<h3>Produtividade</h3>
<p class="description">Aumento de produtividade.</p>
<p class="description">Informações claras e confiáveis de fácil acesso.</p>
<p class="description">Diversidade de fornecedores e materiais.</p>
<p class="description">Relatórios customizáveis.</p>
</div>
<div class="col-sm-3">
<h3>Segurança e transparência</h3>
<p class="description">Rastreabilidade e Histórico de processos.</p>
<p class="description">Transparência e ética em processos.</p>
</div>
<div class="col-sm-3">
<h3>Suporte</h3>
<p class="description">Equipe de suporte ao usuário capacitada e pronto para auxiliar.</p>
<p class="description">Equipe médica multidisciplinar.</p>
</div>
</div>
</div>
</div>
</div>
<div class="group" id="solution">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 img">
<img src="img/portfolio/thumbnails/InpartSaude.png" alt="Logo Inpart Saúde">
</div>
<div class="col-sm-3 img">
<img src="img/portfolio/thumbnails/QLikView.png" alt="QLikView">
</div>
<div class="col-sm-3 img">
<img src="img/portfolio/thumbnails/InpartSaudeBI.png" alt="Inpart Saúde B.I.">
</div>
<div class="col-sm-3 img">
<img src="img/portfolio/thumbnails/InpartSaudeBI.jpg" alt="Inpart Saúde">
</div>
</div>
</div>
</div>
</div>
<div class="group" id="contact">
<div class="container">
<h4 class="title">Mantenha contato!</h4>
<div class="row">
<div class="col-sm-12">
<h2>Entre em contato diretamente conosco através do e-mail de atendimento da Inpart Saúde.</h2>
<p>
(xx) xxxx-xxxx
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
</div>
</div>
</div>
</div><!--/#wrap -->
<div id="footer">
<div class="container">
<p class="pull-right">
Copyright © 2017 Inpart Saúde |
<a href="">Termos de serviço</a> |
<a href="">Políticas de privacidade</a>
</p>
</div>
</div>
</body>
</html>