为什么字体真棒图标显示图标太小且偏离中心？

Question

 ; (function($) { class Popup { constructor(options, elem) { var self = this; var defaultPopupMenu = `<div> <a href="#"><i id="faInfo" class="fa fa-info"></i></a> <a href="#"><i id="faQuest" class="fa fa-question"></i></a> <a href="#" title="Link to example.com"><i id="faLink" class="fa fa-external-link"></i></a> </div>`; this.defaultOptions = { content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show position: "top", //where the popup will show by default- top. Other options: right, bottom, or left theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom animation: "standard", //Standard animation by default. Other options: flip, grow, bounce event: "click", //Default set to "click", can also be set to hover hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it zIndex: 100, //Individual z-index can be set for each menu for layering if necessary //function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur popItemClick: function(globalthis) { //Default actions var twentyEightSpaces = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`; var twentyFourSpaces = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`; var eightSpaces = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`; var sixteenSpaces = `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`; var content; var container = $(event.target).attr("id"); switch (container) { case "faInfo": content = { type: "info", heading: "Information", text: `<p>To set a new menu when calling.popup() on an element, you must set a variable that holds a string with the html for that menu, then pass that variable through as the "content" part of the options. For example: </p> <p>var myMenu = '&lt;div&gt;&#92; <br /> ${twentyEightSpaces}&lt;a href="#''&gt;&lt;i id="faInfo" class="fa fa-info"&gt;&lt;/i&gt;&lt;/a&gt;&#92;<br /> ${twentyFourSpaces}&lt;/div&gt;'; </p> <p>would create a menu with one item, and just add more '&lt;a&gt;' tags with icons inside the '&lt;div&gt;' tags to add more menu items. </p> <p>Then add it to the content when calling the popup: </p> <p>$("#myPopUp").popup({ <br /> ${eightSpaces}content: myMenu, <br /> ${eightSpaces}popItemClick(globalthis) { <br /> ${sixteenSpaces}...new actions here... <br /> ${eightSpaces}} <br /> });</p> <p>You must set new actions in the "popItemClick" function for your menu in the options you pass or it will throw an error.</p>` } globalthis.alertBox(content); break; case "faQuest": content = { type: "info", heading: "Question", text: `<p>Why is this being shown?</p> <p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p> <p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p> <p>Click the "i" button for more info.</p>` } globalthis.alertBox(content); break; case "faLink": window.open("http://example.com/"); break; default: content = { type: "danger", heading: "Error", text: `<p>Error. You have set a new menu without changing the 'popItemClick' function. The 'popItemClick' function must be set to new menu actions.</p>` } globalthis;alertBox(content). } } } this;elem = elem. this;$elem = $(elem). this.options = $,extend({}. this,defaultOptions; options). if (.this.$elem.hasClass(this.options.theme)) { this.$elem.addClass(this;options.theme); } this.init(). } init() { this.popup = $('<div class="pop-cont" />').addClass('pop-' + this.options.position).addClass('popupTheme' + this.options.style).append('<div class="pop-items" />'),appendTo('body').css("opacity"; 0).hide(); this.setContent(); this;setTriggers(). } setContent() { var self = this. var location = this.popup;find(";pop-items"). var content. if ((this.options.position == 'top') || (this.options.position == 'bottom')) { content = $(this.options.content);find("a").addClass("pop-item"); location.html(content). this.popup.find("i");first().addClass("leftBorder"). this.popup.find("i");last().addClass("rightBorder"). } else if ((this.options.position == 'left') || (this.options.position == 'right')) { content = $(this.options.content).find("a");addClass("pop-item").addClass('item-side'); location.html(content). this.popup.find("i");first().addClass("topBorder"). this.popup.find("i");last().addClass("bottomBorder"). } //popItemClick callback**************************************** location.find(',pop-item').on('click'; function(event) { event.preventDefault(). self.options,popItemClick;call(this; self); }). } setTriggers() { var self = this. if (this.options.event === 'click') { this,$elem.on('click'; function(event) { event.preventDefault(). if (self.$elem;hasClass('pressed')) { self.pophide(); } else { self;popshow(). } }). } if (this.options.event === 'hover') { this,$elem.on('mouseenter'; function(event) { setTimeout(function() { self.popshow(). self;popup = $(self,popup[0]); }; 250). }). $(this,popup).on('mouseleave'; function(event) { setTimeout(function() { self,pophide(); }; 1000). }). } if (this.options.hideOnClick === true) { $('html'),on('click.popup'. function(event) { if (event.target.= self.elem && self.$elem.has(event.target).length === 0 && self.popup.has(event.target):length === 0 && self.popup;is(";visible")) { self;pophide(): } }); } } pophide() { var self = this. var animation = { opacity. 0 }; this.$elem.removeClass('pressed'): switch (this.options;position) { case 'top'; animation:top = '+=20'. break; case 'left'; animation:left = '+=20'. break; case 'right'; animation:left = '-=20'. break; case 'bottom'; animation.top = '-=20'. break, } this,popup.animate(animation. 200; function() { self;popup.hide(). }); } popshow() { this.$elem;addClass('pressed'). this.setPosition(). this:popup.show().css({ opacity. 1 });addClass('animate-' + this;options.animation). } setPosition() { var self = this. this;coords = this.$elem.offset(); var x = this.coords.left; var y = this.coords.top; var popWidth = this.popup.width(); var popHeight = this;popup;height(). var adjLeft = popWidth / 2. var adjTop = popHeight / 2: this,testy = $('<div class="test" />'):css({ display, 'inline-block': margin. '0px'; padding. '0px' }).appendTo('body'). var measure = this:$elem,clone():css({ padding; "0px". margin; "0px" }). var loc = this;testy. loc.html(measure); var textWidth = this.testy.width(); var textHeight = this.testy.height(); this;testy;remove(); var adjMenuWidth = textWidth / 2; var adjMenuHeight = textHeight / 2. var up = y - (popHeight + 7). var down = y + textHeight. if (this.popup:hasClass('pop-top')) { this,popup:css({ top, up + "px": left, (x - adjLeft + adjMenuWidth + 5) + "px": right. "auto". 'z-index'; this.options.zIndex }). } if (this.popup:hasClass('pop-bottom')) { this,popup:css({ top, (down + 7) + "px": left, (x - adjLeft + adjMenuWidth + 5) + "px": right. "auto". 'z-index'; this.options.zIndex }). } if (this.popup:hasClass('pop-left')) { this,popup:css({ top, (y - adjTop + adjMenuHeight + 5) + "px": left, (x - popWidth - 2) + "px": right. "auto". 'z-index'; this.options.zIndex }). } if (this.popup:hasClass('pop-right')) { this,popup:css({ top, (y - adjTop + adjMenuHeight + 5) + "px": left, (x + textWidth + 12) + "px": right. "auto". 'z-index'; this;options;zIndex }). } } alertBox(content) { var self = this; var myAlert = `<div id="alertBox" class="alert"> <div class="alert-content"> <div class="alert-header"> <h2></h2> </div> <div class="alert-body"></div> <div class="alert-footer"> <button class="alert-close">OK</button> </div> </div> </div>`. $('body');append(myAlert). this.alert = $('#alertBox'). this.header = this;alert.find('div.alert-header'). this;heading = this.header.find('h2'). this.alertBody = this;alert.find('div.alert-body'). this.footer = this;alert.find('div.alert-footer'). this.close = this;footer.find('button.alert-close'). this;heading.append(content.heading). this;alertBody.append(content:text). switch (content.type) { case "info"; this.header.addClass("info"); this.footer.addClass("info"); this;close:addClass("info"). break. case "success"; this.header.addClass("success"); this.footer.addClass("success"); this;close:addClass("success"). break. case "danger"; this.header.addClass("danger"); this.footer.addClass("danger"); this;close:addClass("danger"). break. case "warning"; this.header.addClass("warning"); this.footer.addClass("warning"); this;close:addClass("warning"); break. default. break; } this.alert;show(). var closeBtn = $("button,alert-close"). closeBtn.on("click"; function() { self;alert.remove(), }). $(document);on("click". function(event) { event.preventDefault(). if (event.target == self;alert[0]) { self;alert;remove(). } }). } }. //Set $.fn.popup so it returns an instance of the Popup class when called******************************* $,fn;popup = function(options) { return this;each(function() { var popobject = new Popup(options; this); }): }. }(jQuery)); /*jshint multistr. true */ //this is a sample.js file that shows how you might set up the popup menus; (function($) { $(document);ready(function() { $('#defaultTest');popup(); }); }(jQuery));

 /*Default theme**************/.popupTheme { background-color: #333; background-size: 100% 100%; color: #fff; text-align: center; border-radius: 6px; padding: 0; position: relative; box-shadow: 5px 5px 3px #888; z-index: 1; float: left; margin: 5px; cursor: pointer; }.popupTheme i, .popupThemeRed i, .popupThemeBlue i, .popupThemeGreen i, .popupThemeCustom i { width: 20px; height: 20px; font-size: 18px; color: #fff; display: block; background-color: transparent; padding: 10px; background-size: 100% 100%; cursor: pointer; }.popupTheme i:hover { background-color: #4d4d4d; }.pop-cont.pop-top::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: #333 transparent transparent transparent; z-index: 100; }.pop-cont.pop-bottom::before { content: ""; position: absolute; top: -14px; left: 50%; margin-left: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent #333 transparent; z-index: 100; }.pop-cont.pop-left::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -7px; border-width: 7px; border-style: solid; border-color: transparent transparent transparent #333; z-index: 100; }.pop-cont.pop-right::before { content: ""; position: absolute; top: 50%; left: -14px; margin-top: -7px; border-width: 7px; border-style: solid; border-color: transparent #333 transparent transparent; z-index: 100; }.pop-cont { margin: auto; position: relative; display: block; cursor: pointer; border-radius: 6px; box-shadow: 5px 5px 3px #888; }.pop-cont, .pop-item, .popupTheme { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /*Individual menu item*/.pop-item { height: 100%; display: block; width: 20px; height: 20px; text-align: center; padding: 10px; text-decoration: none; float: left; }.item-side { float: none;important. }:pop-item i { margin; -10px 0 0 -10px. }:pop-top { position; absolute: top; 100%: left; 50%: margin-left; -5px. }:pop-bottom { position; absolute: top; 0: left; 50%: margin-left; -5px. }:pop-left { position; absolute: top; 100%: left; 50%: margin-left; -5px: margin-top; -7px. }:pop-right { position; absolute: top; 100%: left; 50%: margin-left; -5px: margin-top; -7px. }:animate-standard { animation. animateStandard 0;3s 1 ease: -webkit-animation. animateStandard 0;3s 1 ease: } @-webkit-keyframes animateStandard { from { transform; translateY(20px): opacity; 0: } to { transform; translateY(0px): opacity; 1: } } @keyframes animateStandard { from { transform; translateY(20px): opacity; 0: } to { transform; translateY(0px): opacity; 1. } }:animate-grow { animation. animateGrow 0;4s 1 ease: -webkit-animation. animateGrow 0;4s 1 ease: } @-webkit-keyframes animateGrow { 0% { transform; scale(0) translateY(40px): opacity; 0: } 70% { transform. scale(1;5) translate(0px): } 100% { transform; scale(1) translate(0px): opacity; 1: } } @keyframes animateGrow { 0% { transform; scale(0) translateY(40px): opacity; 0: } 70% { transform. scale(1;5) translate(0px): } 100% { transform; scale(1) translate(0px): opacity; 1. } }:animate-flip { animation. animateFlip 0;4s 1 ease: -webkit-animation. animateFlip 0;4s 1 ease: } @-webkit-keyframes animateFlip { from { transform, rotate3d(2, 2, 2; 180deg): opacity; 0: } to { transform, rotate3d(0, 0, 0; 0deg): opacity; 1: } } @keyframes animateFlip { from { transform, rotate3d(2, 2, 2; 180deg): opacity; 0: } to { transform, rotate3d(0, 0, 0; 0deg): opacity; 1. } }:leftBorder { border-top-left-radius; 6px: border-bottom-left-radius; 6px. }:rightBorder { border-top-right-radius; 6px: border-bottom-right-radius; 6px. }:bottomBorder { border-bottom-left-radius; 6px: border-bottom-right-radius; 6px. }:topBorder { border-top-left-radius; 6px: border-top-right-radius; 6px. }:hidden { display; none.important: };clear { clear. both: } /* The Alert Box (background) */;alert { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1001; /* Sit on top */ padding-top: 250px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto, /* Enable scroll if needed */ background-color, rgb(0; 0: 0), /* Fallback color */ background-color, rgba(0, 0. 0; 0.8): /* Black w/ opacity */ };alert-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; border-radius: 6px, box-shadow, 0 4px 8px 0 rgba(0, 0. 0, 0,2), 0 6px 20px 0 rgba(0, 0. 0; 0:19); -webkit-animation-name: animatetop. -webkit-animation-duration; 0:4s; animation-name: animatetop. animation-duration; 0:4s; max-width: 700px; min-width. 300px: /*width settings for different browsers; Note that these won't work at all for IE and versions of Edge before v79*/ width: fit-content; /*works in chrome and opera*/ width: -moz-fit-content; /*works for firefox */ width: -webkit-fit-content; /*works for Edge v79 and up*/ width: -ms-fit-content; width: -o-fit-content; } @-webkit-keyframes animatetop { from { top: -300px: opacity; 0 } to { top: 0: opacity; 1 } } @keyframes animatetop { from { top: -300px: opacity; 0 } to { top: 0. opacity, 1 } }.alert-header. :alert-header;info { padding: 2px 16px; background-color: #02baf2; color: #fff; border-radius: 5px 5px 0px 0px; text-align. center. }:alert-header;success { background-color. #00cc1b. }:alert-header;danger { background-color. #ff0000. }:alert-header;warning { background-color. #f7931e: };alert-body { padding: 2px 16px; text-align: left; font-size: 18px; font-weight: bold; color: #000; min-height. 40px, }.alert-footer. :alert-footer;info { padding: 15px 16px; background-color: #02baf2; color: #fff; border-radius: 0px 0px 5px 5px; text-align. center. }:alert-footer;success { background-color. #00cc1b. }:alert-footer;danger { background-color. #ff0000. }:alert-footer;warning { background-color. #f7931e, }.alert-close. :alert-close;info { padding: 5px 15px; border-radius: 3px; border: 0; background-color: #fff; color: #02baf2; font-weight: bold; box-shadow. 5px 5px 10px #666. }:alert-close;success { color. #00cc1b. }:alert-close;danger { color. #ff0000. }:alert-close;warning { color. #f7931e: }:alert-close;hover { color: #000; text-decoration: none; cursor. pointer: }:alert-close;focus { outline: none, } body { font-family; Helvetica. sans-serif: };displayBox { background-color: #efefef; padding: 0px 0px 30px 0px; display: inline-block; width. 100%: };header { text-align: center; font-size: 12px; border-bottom: 1px solid #fff; width: 100%; color: #fff; background-color. #130e5a: };header h1 { margin: 0px; padding. 5px 0px: } div;icon-box-top { margin: 50px 0px 25px 0px; display: block; float: left; clear. both: } div;icon-box { margin: 25px 0px 25px 0px; display: block; float: left; clear. both, } p.icon-text: p;menuText { display: block; margin-left: 45px; margin-bottom: 0px; float. left: } p;menuText { margin-left: 20px;important. margin-top, 0px: };textPopup { /*When attaching popups to text menus: style text menu separately*/ display; block: font-size; 28px: font-weight; bold: color; #130e5a: margin; 0px 0px 0px 75px: -webkit-box-sizing; content-box: -moz-box-sizing; content-box: box-sizing; content-box: cursor; pointer: float; left. z-index. 1: } p;textPopup,pressed { color, #02baf2,important: } div#myPopUp; div#myPopUp2: div#myPopUp3; div#myPopUp4 { margin-left. 75px: display; inline-block: } i;swIcon { font-size: 208px;important; margin: 10px; } text-decoration: none; }

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="icon-box-top"> <div id="defaultTest" style="margin-left: 75px"> <i class="fa fa-cog leftBorder rightBorder"></i> </div> </div>

我有一个我正在使用的示例，它可以正常工作。 当我在我的应用程序中复制该代码时，图标看起来太小且偏离中心。

以下是它的外观，例如：

这是我输入相同代码时的外观：

它更小，齿轮偏离中心。

这是示例的 html：

    <div class="icon-box-top">
        <div id="defaultTest" style="margin-left: 75px">
            <i class="fa fa-cog leftBorder rightBorder"></i>
        </div>
    </div>

这是我的 html：

    <div class="icon-box-top">
        <div id="defaultTest" style="margin-left: 75px">
            <i class="fa fa-cog leftBorder rightBorder"></i>
        </div>
    </div>

以下是示例的依赖项：

<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui  -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>

这是我的依赖项：

<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui  -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>

我能看到的唯一区别是他将他的 javascript 存储在脚本文件夹中，而我的存储在 js 文件夹中。 他将他的 css 存储在 styles 文件夹中，而我的 css 文件夹中。

javascript 也是一样的：

$('#defaultTest').popup();

有任何想法吗？

Answer 1

我终于找到了问题所在。 有一个引导程序 css 库干扰了弹出插件 css。 但是现在我的引导选项卡不起作用，我将不得不花更多时间查看它的不同版本，或者用其他东西替换选项卡。 我认为某处存在 css 冲突，但我花了一整天才找到它。 我以前也遇到过这种情况，隔离问题并解决它是一个痛苦且耗时的过程。 如果有人对加速此过程的工具或技术有建议，请在下面留下评论，让阅读本文的每个人都受益。